Hi,
At most time when I upload stuff, I usually select more than one local file to be uploaded. It gets a little irritating to click the Upload button for each file to be uploaded. The other day, I noticed the way box.net does it and least to say, I got curious. I tried figuring out ways for Javascript / HTML combination to do this, but could not find any appropriate construct that could let me select multiple file in the "File Open" dialog box. Interestingly, not many sites supported this feature of selecting multiple files at the same time.
That is when I started reverse engineering the box.net interface, to discover the intricate synergy of Flash and Javascript doing the magic. Though the page seems to be complete Javascript, a hidden Flash movie is loaded when the upload button is clicked.
A little more experimentation with SWFMill to peek at the flash movie showed the use of the FileReference and the FileReferenceList Object. A simple FileReferenceList.browse() opens up the multi-select file open dialog. After selecting multiple files, the file names are passed to the FileReference Object as an array.
Flash then calls a JavaScript function that appends the <input type='file'> in the DOM. Now that is a pretty neat way of doing it, and I also googled for libraries that allows mix and match of this. This was an interesting library, with a lot more capabilities that I came across.
Interestingly, I looked at the Web Forms 2.0 and discovered that this feature could be easily implemented using the max and min attributes that would be supplied to the input type. However, this is still a working draft, and could take some time till it is pushed into HTML 5. Here is how Web Forms 2.0 map to the HTML versions.
