Is it possible to use HTML Drag and Drop file uploads, but without AJAX / XHR?

4
votes

I've got my form accepting drag and drop events but everything I've read online about them seems to imply that you can't upload the dropped file as part of a standard form submission like an <input type="file" />. Is it actually possible to avoid AJAX / XHR and just upload the file when you submit the form? Perhaps moving the file data into the file input?

1
javascripthtmldrag-and-drop
Try this: stackoverflow.com/questions/12121589/… – Jatin

1 Answers

2
votes

This can be done using jQuery. Here is a sample code:

$(document).on("dragover drop", function(e) {
e.preventDefault();  // allow dropping and don't navigate to file on drop
}).on("drop", function(e) {
$("input[type='file']")
    .prop("files", e.originalEvent.dataTransfer.files)  // put files into element
    .closest("form")
      .submit();  // autosubmit as well
});

This allows you to drag a file onto the "select file" button. Visit this JsFiddle to see it in working action: http://jsfiddle.net/qMmPr/

If this helped, please mark this as the correct answer.