javascript - Drag-and-drop file uploading without AJAX, synchronously in the foreground? -

i have web site regular <input type="file"> file upload, posting data backend when form submitted.

i progressively enhance form can drop file outside browser anywhere in viewport (not on file input field, built browsers) upload it.

whether or not form autosubmits isn't important. if drag-and-drop selects file in file field, without starting upload, that's fine. don't need support multiple files. don't need show upload progress, thumbnails or fancy.

i know there js libs support drag-and-drop uploads, seem upload via ajax. that, need modify backend , frontend handle upload errors, redirect , show right messages on success , on.

i want progressive enhancement doesn't require backend changes. should happen synchronously using form in page. js fine, long upload happens "in foreground". synchronous ajax not work, of course.

although not "synchronous" (javascript execution won't halt), can set files selected <input type="file"> programatically. in fact, such elements , dragging share file backend implementation (file , filelist instances), it's straight-forward. what's more, due both frontends using filelists, dragging multiple files work seamlessly.

this works in chrome (using jquery): http://jsfiddle.net/qmmpr/.

$(document).on("dragover drop", function(e) {     e.preventdefault();  // allow dropping , don't navigate file on drop }).on("drop", function(e) {     $("input[type='file']")         .prop("files", e.originalevent.datatransfer.files)  // put files element         .closest("form")           .submit();  // autosubmit });