Components: add FilePicker component

[TooTallNate]

Opens a native browser file picker dialog when the user clicks the contents of the component. Usage looks something like:

 <FilePicker multiple accept="image/*" onPick={ console.log.bind(console) } >
   <a href="#">Select a few images!</a>
 </FilePicker>

Will be used for Reader's OPML "Import" button, but is generic enough to turn into a reusable component.

This is my first React component!! In general I'm looking for feedback regarding implementation, and if this is a good use of a reusable component at all. I was skeptical at first since it's inherently a "functional component" (that is, has no UI built-in) but the more I thought about it, the more I thought it made sense with respect to a classic <input type="file"> element. But perhaps there's a better React mechanism then I'm doing here that I don't yet know of.

Thanks in advance!

/cc @blowery @jancavan

[TooTallNate]

Do I need to do something with npm-shrinkwrap.json about this?

[blowery]

yup, install clingwrap and clingwrap component-file-picker.

might need to be using npm@2.14.12 when you do it too? that bit is still unclear to me. @gwwar might be able to shed some light on it.

[gwwar]

https://github.com/Automattic/wp-calypso/blob/master/docs/shrinkwrap.md#modifying-dependencies

And we're currently using node 4.3.0 with npm 2.14.12

Feel free to ping me, if the instructions don't make sense

[blowery]

maybe switch these to use debug ?

[TooTallNate]

You think so? For a doc example I thought it would be good to see the "results" of the user action kind of in-your-face. Gridicons uses prompt() for example, which is similar.

We should have some standard way of displaying results in the docs (a built-in log-dump thing would be cool).

[blowery]

looks good! 🚢