I am prototyping a workaround plugin for the WordPress Drag ‘n’ Drop uploader to help with including DnD file uploads directly into the system (generating proper database entries, etc.) without much added overhead, rebuilding, or hacking.
I’ve hit a snag trying to take files that are dropped into an element and programmatically simulate them being dropped onto a different element (to trigger the native upload sequence in WP).
JS
$('#uploader').on(
{dragenter: function(e) {
e.preventDefault();
e.stopPropagation();
console.log('dragenter');
},
dragover: function(e) {
e.preventDefault();
e.stopPropagation();
console.log('dragover');
},
drop: function(e){
if(e.originalEvent.dataTransfer){
if(e.originalEvent.dataTransfer.files.length) {
e.preventDefault();
e.stopPropagation();
/*Do Stuff*/
var id, remoteFrame, uploader, plupload, file, i, files = [], id, fileNames = {}, native_files;
remoteFrame = $('#media_uploader_hidden')[0].contentWindow; // iFrame context
plupload = remoteFrame.plupload // localize
uploader = remoteFrame.uploader; // localize
native_files = e.originalEvent.dataTransfer.files; // raw files
// Initialize Runtime
plupload.runtimes['Html5'].init(uploader,function(){console.log('initialized HTML5')});
// Add files to the file queue
for (i = 0; i < native_files.length; i++) {
file = native_files[i];
// Safari on Windows will add first file from dragged set multiple times
// @see: https://bugs.webkit.org/show_bug.cgi?id=37957
if (fileNames[file.name]) {
continue;
}
fileNames[file.name] = true;
// Store away gears blob internally
id = plupload.guid();
// Create queue array with id, name and size
files.push(new plupload.File(id, file.fileName || file.name, file.fileSize || file.size)); // fileName / fileSize deprecated
}
// Trigger FilesAdded event if we added any
if (files.length) {
uploader.trigger("FilesAdded", files);
}
console.log(uploader.files);
}
}
console.log('drop');
}},
'.drag-drop-area'
);
HTML:
<div id="uploader"><div class=".drag-drop-area"></div></div>
<div id="test"></div>
I do have a log set to trigger when something is “dropped” onto #test.
Ultimately the dropped files will be directed to an element in a hidden iFrame with WordPress’ media uploader.
Edit:
Been hunting for a way to plug directly into the Plupload (jQuery plugin used by WordPress for DND) to add files to the queue – but couldn’t find anything. Seem all of the “add to queue” functions are enclosed.