Using HTML5 Drag/Drop for uploads - Help!

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
I'm trying to use HTML5's drag-and-drop to upload a set of files using

Manually selecting the files, all works well, because in the following
code, myFile0[] contains the array of file info passed to the script. If,
OTOH, I drag files to the target div, myFile0[] is empty, and no data is
submitted. How do I submit the file information using drag/drop?

Pertinent code:

<input type='file' name='myFile0[]' id='myFile0' multiple='multiple'>
<div><img src='../mailbox1.jpg' id='filedrag'></div>

js - Add event listeners:
fileselect = document.getElementById("myFile0");
filedrag = document.getElementById("filedrag");
fileselect.addEventListener("change", FileSelectHandler, false);
filedrag.addEventListener("dragover", FileDragHover, false);
filedrag.addEventListener("dragleave", FileDragHover, false);
filedrag.addEventListener("drop", FileSelectHandler, false);
return false;

js - file handler:
e.preventDefault(); = (e.type == "dragover" ? "hover" : "");

var files = || e.dataTransfer.files;
(Files selected manually or drag/drop successfully make it to here)
Process files locally for listing, etc.  
Submit HTML form to perl script

@uploadFiles = param('myFile0[]');
@upload_filehandles = $query->upload("myFile0[]");

print "$i uploadFiles:@uploadFiles<br>\n";
print "$i upload_filehandles:@upload_filehandles<br><br>\n";    
exit 0;


Re: Using HTML5 Drag/Drop for uploads - Help!

Joey@still_Learning.invalid wrote:

Quoted text here. Click to load it

What this reduces to is how to convey file handles to Perl.  


Quoted text here. Click to load it

Site Timeline