Thursday, January 07, 2010

Multiple file uploads with html 5, cherrypy 3.2 and firefox 3.6beta5.

Here's an example for uploading multiple files with HTML 5 and newer browsers, like the firefox 3.6 beta5. You can shift/ctrl select multiple files, and even drag and drop them in. Makes for a much nicer user experience uploading files - rather than having to select one at a time, or having to load some java/flash thing.

It uses the unreleased cherrypy 3.2, with it's new request entity parsing tool hooks. See for details about the new control allowed over the whole process. It's a lot easier to make custom request entity parsing behaviour now, and in a much less hacky way than before.

With the tool in there, files come in as a list of files instead.


fumanchu said...

I like it. We should adopt your change as the default behavior for 3.2, IMO. However, we should probably change it to behave like "x-www-form-urlencoded" entities do, where a single value gets returned as-is (not in a list), and multiple values with the same name in a list.

illume said...

ah ok, that would be great :)

Personally, I (sometimes) prefer it to always be a list, just so you only have one type of code handling. But I imagine the single item case is the most common use case - and it would be backwards compatible.

You can use 'multiple' on many types of input with html5. So it should probably not just be files handled this way.

Also, now I see it would be fairly trivial to support php array variable handling with cp 3.2. Just using a tool in that same place that parses the variable names. That is when variables are called:

name='something[0]' value='a'
name='something[1]' value='b'
name='something[anotherkey]' value='c'

Then you get this:
something == {'0':'a', '1':'b', 'anotherkey':'c'}