This forum is closed to new posts and responses. Individual names altered for privacy purposes. The information contained in this website is provided for informational purposes only and should not be construed as a forum for customer support requests. Any customer support requests should be directed to the official HCL customer support channels below:

HCL Software Customer Support Portal for U.S. Federal Government clients
HCL Software Customer Support Portal



Sep 23, 2013, 7:55 PM
11 Posts

Multiple Files Uploader with HTML5 Drag-and-Drop : help required

  • Category: Dojo and Client Side JavaScript
  • Platform: Windows
  • Release: 8.5.3
  • Role: Developer,End User
  • Tags: XPAges
  • Replies: 2

Hi All,

I need one help for drag and drop functionality in xPage to attach multiple attachments asynchronously in domino document. 

Is it possible to implement the same by using HTML5 in xPage? 

Something like below shown link: 

http://yuilibrary.com/yui/docs/uploader/uploader-dd.html

 

Thanks in advance.

Regards,

Yogesh

Sep 24, 2013, 6:26 PM
261 Posts
Yes, that's possible

Hi,

Yes, it's possible. I would suggest using one of the uploaders like the one from YUI (don't have any experience with that), PLUpload or jQuery File Uploader. You then need to create an XPage that you send the files too from the clientside library and process them on the server. This answer on StackOverflow should also point you in the right direction: http://stackoverflow.com/questions/17073250/how-to-upload-and-save-an-attachment-via-xpages-java-bean.

I also have a project on OpenNTF that shows how you can do multiple file uplads with XPages:

http://www.openntf.org/internal/home.nsf/project.xsp?action=openDocument&name=XPages%20Multiple%20File%20Uploader

(I wouldn't recommend that one anymore since it uses Flash, but maybe you can grab some ideas from it).

Another example I did is the (HTML5) image uploader (including drag-n-drop) in Bildr. Also available on OpenNTF.

Mark

Oct 4, 2013, 10:03 AM
11 Posts
Multiple Files Uploader with HTML5 Drag-and-Drop

Thanks Mark,

I tried your OpenNtf database, I just customized your multiple image uploader xpage to fit in my requirement.

I have draged'n'dropped a file on the div having id 'imagesQueue'. I have the file object in javascript. Please see below code which I have added to add files in Queue.

I have modified Div as below:

<div class="fieldset rows" id="imagesQueue" ondrop="drop(event)"

ondragover="allowDrop(event)">
</div>

Javascript Code for Drag and drop:

function allowDrop(ev)
{
 
ev.preventDefault();
ev.dataTransfer.setData("Text", ev.target.id);
 
}
 
 
function drop(ev)
{
 
 ev.preventDefault();
 
 
var FileList = ev.dataTransfer.files; 
 for (var i = 0, f; f = FileList[i]; i++)
  {
if (f.type!="")
{
if(f.type!="undefined") 
{
 
    fileQueued(f);     
    
}
}
 
}
 
 
}

 

After this its showing files inside the div having id 'imagesQueue'..

But problem is that when I clicks on the Start All uploads button it only processes files which are not selected by using Drag and drop.

Please let me know if I am making any mistakes in adding files in the Queue.

 

Thanks and regards,

Yogesh


This forum is closed to new posts and responses. Individual names altered for privacy purposes. The information contained in this website is provided for informational purposes only and should not be construed as a forum for customer support requests. Any customer support requests should be directed to the official HCL customer support channels below:

HCL Software Customer Support Portal for U.S. Federal Government clients
HCL Software Customer Support Portal