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.

Customizing the CSS

The whole point of this component is for you to customize your inputs with CSS
and make them look much better than the native inputs. Lets look at a simple
example.

Here is our component. You can see we have a custom class applied to the block
called custom-class. We are going to use that class to apply our styles.

{{#x-file-input class="custom-class" action="uploadAPhoto"}}
  <h3>Shall you upload?</h3>
{{/x-file-input}}

In our CSS we want to target .custom-class label because the label is the
element that we're making look nice.

.custom-class label {
  background: #34495e;
  padding: 10px;
  color: white;
  border-radius: 5px;
}

This css will make our button look a little something like this:

We are not done yet! Since we're replicating a native input with
HTML and CSS we have to make sure we replicate all of the "default"
features we get when using a native file input. One of those things is a css
:hover and :focus state. These are often overlooked but are critcal to add.
In your CSS you need to add the following:

.x-file--input:focus + label,
.x-file--input + label:hover {
  /* Apply your own hover state */
  background-color: #2C3E50;
}

And that's it! Your file input is now styled and decked to the nines!
If you would like to see a real life example checkout the demo page

EmberX

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

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