HTML5 File Upload API

[Teelevision]

When using the disableSubmit property one can use the form data however one likes, for example sending it to some server in the background. This does not work with file uploads. The value of the file input is something like "C:\fakepath\lena512.bmp" since the browser does not reveal the real path of the file. That value is useless for uploading the file. But fortunately HTML5 provides the File Upload API which can help. The files of the file input can be easily retrieved via target.files, which returns a FileList object.

How to implement this
Changing the handleChange() method of the FileInput component like so:

this.setState({
  value : e.target.files[0]
}, this.props.onChange.bind(null, e.target.files[0]));

While this works in my case where I have a single file, it probably will not work with multiple files, since files[0] retrieves only the first file.

Why I think this should be implemented
In the scope of a single page application built using React this library could be more relevant if it would provide developers the means of handling files in a modern way, the HTML5 way.

More on the API
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

[andrewhathaway]

Hi @Teelevision.

You're completely right, and this should be the case. Bit of an oversight on my part as I will admit I just chucked that input type together.

I imagine that if I set the value to e.target.files being a FileList and not a File, this should work out?

Let me know your thoughts!

[Teelevision]

FileList should work. The question might also be: when will the developer expect a FileList and when a File? Or is it reasonable to always return a FileList, even if it is a single file input?

In another project I was faced with this decision and decided to provide separated input types for single and multiple file inputs. The benefit was that it was clear what to expect as an input. The downside was that the users needed to distinguish between both types while semantically both are pretty much just file inputs.

In this case I would probably stick to the way it is handled in the browser: always use the FileList, never use the single File like I did above. At least developers will know the concept.