jQuery/JS redirect file drop to a different element

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).

Read More

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.

Related posts

Leave a Reply