Sie können mich buchen für:
Individuelle Schulungen für XPages, JavaScript und Appcelerator Titanium Software-Entwicklung für IBM XPages, Appcelerator Titanium (Mobile Apps iPhone, iPad, Android, Blackberry 10), Mobile Web und IBM Notes
HTML5 Multi File Upload with XPages - my solution in a nutshell
Julian Buss, March 2nd, 2012 20:22:14
Tags:  xpages 
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):

Image:HTML5 Multi File Upload with XPages - my solution in a nutshell

A button to start the upload:

Image:HTML5 Multi File Upload with XPages - my solution in a nutshell

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!.
Comments (4) | Permanent Link

Comments:

1) HTML5 Multi File Upload with XPages - my solution in a nutshell
Niklas Heidloff 06.03.2012 06:53:12

Would make a great contribution to the contest :)

2) HTML5 Multi File Upload with XPages - my solution in a nutshell
Wayne MacKIrdy 23.04.2012 19:57:19

I have installed the Custom Control, I can upload files...BUT...while they show up in the Notes Client, I can not see the attachments in the browser (Firefox). What am I missing?

BTW - great control.

3) HTML5 Multi File Upload with XPages - my solution in a nutshell
Julian Buss 24.04.2012 10:43:00

I published a ready-to-use control on OpenNTF, please check if that works for you: { Link }

4) HTML5 Multi File Upload with XPages - my solution in a nutshell
Gernot Hummer 09.11.2012 15:31:05

I did some work based on yours and came up with this js lib (I just don't like all too much js in xpages directly and I know it sort of might break modularity of custom controls):

{ Link }

Just initialize the whole thing by calling this in the onClientLoad event of the custom control:

var muController = new UploadController();

dojo.ready(dojo.partial(muController.init,

'#{javascript:'/'+database.getFilePath().replace(/\\/g,'/')+view.getPageName()}',

'#{id:fileUpload1}', '#{id:multiUploadPanel}', '#{id:responsePanel}',

'#{id:buttonSelect}', '#{id:buttonReset}', '#{id:buttonUpload}'))

where

- fileUpload1 is the original input file element,

- multiUploadPanel is a panel to place the multi upload input element in (will be done automatically by js, no extra file upload item needed in the xpage)

- responsePanel is the panel to render the file list (queue) in

- buttonSelect is the id of the button to open the select files dialog

- buttonReset is the button to reset the file list with

- buttonUpload is the button that should push the files to the server.

Add a comment
Subject:
   
Name:
Mail:
Web:
 
Comment:  (No HTML - URLs with leading http://)
 
remember me?   
You can hire me.
See my Linkedin profile for details.

Thanks for reading and have a nice time here!

Please note my Apps for iPhone and iPad: NotesBook: takes your Lotus Notes Notebook (Journal) to your iPhone and iPad xpageswiki.com: huge XPages Tips & Tricks collection for iPhone and iPad