Observation Point

Multiple File Upload Support in Safari 4 Public Beta

Introduced in the HTML 5 specification, the multiple attribute on file inputs (i.e. <input type="file" multiple>) will allow for multiple files to be selected for upload. I had been using the WebKit nightlies and watching for this feature to be enabled in the default builds, but the Safari 4 beta is the first version of Safari that I’ve seen support this. The original commit to WebKit that added this support was 37863.

Here’s an example that you can try out in Safari 4 (click on “Choose File” then select multiple files using shift or cmd):

Once selected, the above field should say “N files” instead of the filename that would normally show up for a single-file selection. You can also drag multiple files at once from Finder onto the field.

To use this, in practice, you need to treat the field as an array by adding brackets to the field name (i.e. <input type="file" name="files[]" multiple>). These files will then be accessible in Rails, PHP, etc as an array of files. I hope to have a tutorial for using this in Ruby on Rails up sometime this weekend.

I hope that more browsers support this soon along with changes to XMLHttpRequest that will allow for client-side progress bars (see WebKit’s Week #6). Maybe we can finally get rid of all of these Flash and elaborate JavaScript workarounds for supporting multiple file uploads.

UPDATE: Andrea Giammarchi has put together an excellent example of a client-side progress bar using XMLHTTPRequest when uploading multiple files!