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

by

Although not really “synchronous” (JavaScript execution won’t actually halt), you can set the files selected by <input type="file"> programatically. In fact, such elements and dragging share their file backend implementation (File and FileList instances), so it’s really straight-forward. What’s more, due to both frontends using FileLists, dragging multiple files work just as seamlessly.

This works in Chrome (using jQuery): http://jsfiddle.net/qMmPr/.

$(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
});

More Related Contents:

  1. How to set a value to a file input in HTML?
  2. How to check file MIME type with javascript before upload?
  3. Remember and Repopulate File Input [duplicate]
  4. How to resolve the C:\fakepath?
  5. Client Checking file size using HTML5?
  6. Using HTML5 file uploads with AJAX and jQuery
  7. Does HTML5 allow drag-drop upload of folders or a folder tree?
  8. jQuery : simulating a click on a doesn’t work in Firefox? [duplicate]
  9. Reading uploaded text file contents in html
  10. Get Base64 encode file-data from Input Form
  11. drag drop files into standard html file input
  12. How to select multiple files with ?
  13. get the data of uploaded file in javascript
  14. Integrating Dropzone.js into existing HTML form with other fields
  15. What is the best way to upload a folder to a website?
  16. copying the value of a form’s file input field to another form’s input field
  17. javascript: upload image file and draw it into a canvas
  18. how to get full path from fileupload using Javascript
  19. trigger file upload dialog using javascript/jquery
  20. jQuery Data vs Attr?
  21. jQuery ID selector works only for the first element
  22. How to read text file in JavaScript
  23. How to style “input file” with CSS3 / Javascript? [duplicate]
  24. How to keep the menu state on page reload
  25. How can I serialize a function in JavaScript?
  26. Find first scrollable parent
  27. Javascript, viewing [object HTMLInputElement]
  28. Silent print an embedded PDF
  29. create screenshot of webpage using html2canvas (unable to initialize properly)
  30. Freeze Header until Irrelevant (HTML, CSS and JS)

Leave a Comment