emberx-file-input

I select files well. I select files very, very well.

x-file-input is a tiny re-usable component which does one thing and only: binds an action to the native html file selection dialog while allowing you to render arbitrary HTML to act as the trigger for that file selector.

This allows you to compose it with whatever other components and application code you need to make that perfect workflow that involves selecting files: from uploads to imports.

What you do with the files once they are selected? Welp, that's between you and your app.

Installation

ember install emberx-file-input

Usage

Bind an action to the file input:

{{x-file-input name="files" multiple=true action=(action "didSelectFiles") alt="Choose a File"}}

Whenever the user selects a file, the didSelectfiles action will be invoked with an array of File objects.

Note: Whether the file input is for a single file or mulitple files, it will always return an array of File objects upon selection.

In its blockless form, it will render as a bare input[type=file]. Like this:

But that's kinda ugly! For beautiful file inputs, pass a block. This HTML will be used as the trigger of the file input.

{{#x-file-input multiple=true action=(action "didSelectFiles")}}
  <img src="http://i-should-buy-a-boat-cat.com" alt="I should buy a boat"/>
{{/x-file-input}}

Instead of that boring old stock file selector, your users will see this:

And don't worry, that custom trigger is a form label, so the file input remains 100% accessible.

EmberX

emberx-file-input is part of the "missing components of ember" collectively known as emberx:

• emberx-select
• emberx-slider
• emberx-file-input