Send drag and drop file to input type file element

drag-and-drop, file-upload, javascript

Solution

You could just create and send a form after your drop event has occurred, and the user clicks a conf button. Heres the gist of it: (not tested).

function uploadFile(file) {
    var form = new FormData(),
        xhr = new XMLHttpRequest();

    form.append('media', file);
    xhr.open('POST', '/myurl/');

    xhr.onprogress = function(e) {
        showProgress();
    }

    xhr.onload = function(e) {
        showSuccessConf();
    }

    xhr.send(form);
}

uploadFile(event.dataTransfer.files[0]);

Problem

I have a form builder and I want to add drag and drop file capabilities. Where I'm stuck is that all the resources I'm coming across upload the image via `xhr` when dropped. I want the image to persist until the form is submitted. Ideally the `event.dataTransfer.files[0]` object would be transferred to the `<input type="file" ...value="[dropped-file]">` element. Currently I'm unable to make this happen. Do they use compatible data types?

Original source