XPages HTML5 MultiFile Upload With Drag and Drop

Year ago I published a HTML5 Multi File Upload Control on openntf, now I extended it with drag & drop capability. And after doing some research, it was suprisingly easy.

First you need the custom control, download it here from openntf.

Then you need to add a div as target for dropping files:

Drop files here

Add some CSS to make the div pretty.

Finally you need to add this CSJS to the end of the custom control:

In the drop event we get the list of files dropped onto the div from the dataTransfer object, and we can put this list of file objects to the ynUploader_worker function which is already defined in the custom control.

I tested this in Chrome, Firefox and IE11 and – what a pleasant suprise – it works in all of them, even in IE.

Comments are closed.