DEV: add pick-files-button component (PR #13764)

This adds a new component – a button that fires a system file picker and has an event onFilesPicked, the enclosing component (or controller) can subscribe to it.

Note that you probably shouldn’t use this component if you need to upload picked files directly to the server. In this case you should use upload mixin or probably uppy-upload mixin that was introduced by @martin-brennan recently.

The pick-files-button component can be useful, for example, when you’re going to:

  1. Read file content and show it on the page
  2. Parse data from a file and add it to the Ember-Data store

The first usage of this component will be in Data Explorer (there we put data from file to the Ember store).

Sadly, tests are skipped. I was able to trigger an uploading event in tests, but for some reason when running tests the component receives an empty list of files. I couldn’t make it work, I’m going to revisit these tests later.


We should use this.element.querySelector to scope it to this component rather than the whole document. Also since we are finding by Id I recommend this.element.getElementById. (same for _bindControls below)

There should be an equivalent removeEventListener to avoid leaks.

Super super trivial but why two spaces here between attributes?

accidentally :), will fix

Turned out getElementById isn’t available on element, only on document. Anyway, I think we don’t need id on the input, we can select it using this.element.querySelector("input"). I’ve addressed this and all other comments.

Thanks for tagging me on this. I think we may be able to use this in other places later, because we need to do the same thing for uppy (manually monitor a file picker for changes and pass the picked files somewhere else). I may end up changing this at some point with the ongoing upload work I am doing. Just a note for this:

uppy-upload mixin that was introduced by @martin-brennan recently.

No one should be using this yet, it is still experimental and not at all ready for regular use. I will add a comment to it to indicate this/