Question

I’m working on a new drag-and-drop files plugin, however , unlike all those plugins out there
I don’t want it to upload it as it “dropped”.

The idea is:
1.The user drags and drops the files.

2.(Some Magic)

3.The user submit the form and only than those files getting uploaded to the server

I tried appending the file’s name to the form as an input type=hidden , however I can’t do anything with it on the server side (php);

Can I append the file’s details to a input type=file field some how so the browser will “think” the file has been selected via regular file input field

My js:

$('#drop-zone').bind('drop', function(e) {

    // This variable represents the files that have been dragged
    // into the drop area
    var files = e.dataTransfer.files;

    $('#uploaded-list').show();
    // For each file
    $.each(files, function(index, file) {

        /* What can I do in here?*/

    });


});

Thanks.

Answer 1

Maybe you’ve already solved this, but I figured this out today.

This would not be IE9- compliant (but then again, neither are drag and drop files), but you could store the dataTransfer.files data, and when you’re ready to submit, create a FormData from the form and append the files.

var formData = new FormData(html_element_of_form); //not a jq obj!
for (var i = 0; i < files.length; i++) {
  formData.append('file', files[i]);
}

// now post a new XHR request
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.onload = function () {
  if (xhr.status === 200) {
    console.log('all done: ' + xhr.status);
  } else {
    console.log('blarrghhhhh...');
  }
};

xhr.send(formData);