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