Uploading multiple files using HTML5

During my search for a list of changes to the rendering engine of the beta version of Chrome 3, I discovered a little HTML5 gem that has largely gone unnoticed in the current version of Chrome: uploading multiple files using a single <input type='file'> form field.

Easier file uploading has been the holy grail of many interface designers and developers. Unfortunately HTML hasn’t been making their lives any easier. The problems we have been running into are threefold:

• While it is possible to uploading multiple files at the same time, it is not possible to select those files at once. You need to create multiple form fields and select each file individually. While this isn’t a big problem if you want to upload 2 or 3 files, it can become quite a boring and tedious task if you want to upload 20, 30 or even 100 files at the same time. You need to select all of those files individually and can’t simply select multiple files after you click the Browse… button of the file form field.
• If you upload a file, there is no indication how long that action will take. The user simply submits the form and has to wait until the next page appears. If the file they upload is large, it might take quite a while. Without feedback about the fact that the file is being processed and the approximate time it will take, users might become impatient or even uncertain if everything is still working properly.
• It is not possible to limit the size of uploads before actually uploading them to the server. It is possible of course to limit the size on the server and reject any files that are over a certain size. But in those cases the file has already been uploaded to the server, wouldn’t it be much better to give a warning beforehand. The same thing applies to file types, there is currently no way to limit uploads to a certain file type or list of file types.

Instead of waiting for a proper solution to the problems above, many developers have moved to Flash to provide this functionality instead. Flash 8 has provided us with a simple to use API for selecting and uploading files that isn’t bound to the any of these limitations. You don’t even need to build your entire website in Flash, you can simply embed an invisible Flash object that provides access to the API using Javascript. See the SWFUpload website for an easy to use, open source implementation using this API.

The upcoming HTML5 specification promises a proper solution for at least two of the limitations. The file upload element will support selecting multiple files at once and limiting the selection to files of a certain type. There is also a W3C working draft for a solution to the remaining limitations called File Upload, but it might take a while for a browser vendor to implement those improvements.

Chrome 2, but also Safari 4 has experimental support for the first solution: selecting multiple files. Instead of writing:

<form action='#' method='post' enctype='multipart/form-data'>
  <input name='uploads[]' type=file>
  <input name='uploads[]' type=file>
  <input name='uploads[]' type=file>
  <input type='submit'>
</form>

You would only need to write:

<form action='#' method='post' enctype='multipart/form-data'>
  <input name='uploads[]' type=file multiple>
  <input type='submit'>
</form>

Note: You probably noticed the brackets I used in the name of the input element. This is not a requirement of the HTML5 specification in any way, but it is a requirement of the PHP scripting language I use on the server. If you add the brackets to the name PHP will construct an array of the uploaded files on the server. If you would leave off the brackets it would process the files in order and only provide the last file to your script. For more information about processing multiple uploaded files see the PHP manual.