Two days ago I asked if someone made the HTML5 multi file upload control work with XPages.

Tim Tripcony did, but could not reveal details (yet?). Otherwise, it seems that no one solved this yet. Tommy Valand told me about a very interesting link.

At this link, someone described how he made file uploads via Ajax. That was a good hint and I continued my research in that direction. And finally, I succeeded :-)
I don't have that much time now, but I'd like to give you an overview of my solution.

The thing I like the most about my solution is that it's basically very, very simple. No need for custom Java code, ExtLib controls or any other non-standard component. Just pure XPages!

Here is the basic idea: let the user select multiple files to upload, using the HTML5 upload control. The let Domino think that the user uploads one file after the other using the standard XPage file upload control, but in fact do it automatically in the background using Ajax.

In more detail:

• Put one standard XPage File Upload control on your page. Hide it with style="display:none".
• Write a 'input type="file" multiple' HTML5 tag to let the user select multiple files.
• After the user selected the files, the HTML5-input tag has a JavaScript "files" object, which is a collection of "file" objects.
• Each "file" object contains the file itself in binary form and useful stuff like it's name and size.
• Now create a FormData object (also new in HTML5) and append the file's data with the ID of the standard XPage upload control, so that Domino thinks the file comes from the standard XPage upload control. Add some other items to the form, like $viewid or $$xspsubmitid, otherwise Domino will not accept the data.
• Create a XMLHttpRequest() object and send the FormData object via HTTP POST to the XPage's url.
• Do this for one file after the other.

Here are some of the more interesting code snippets (as screenshots to prevent the Blog from garbling the code):



A button to start the upload:



And the worker function:
worker.txt

So, here it is. Simple solution, few lines of code, just as I like it. I hope you like it, too!
Please don't ask for support for this solution, I give it away as it is, either it works for you, or it doesn't :-)

Side node: naturally, this doesn't work in Internet Explorer (someone suprised?), since Internet Explorer doesn't implement the HTML5 multi file upload control.

Update: the YouAtNotes HTML5 Multi Upload control is now available on OpenNTF!.