Home/ Questions/Q 3427282
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T06:49:03+00:00

Does anybody know how to use HTML5 to achieve uploads by drag-drop files form

  • 0

Does anybody know how to use HTML5 to achieve uploads by drag-drop files form desktop?
I have found the following references:

  1. Selecting files using drag and drop (2017-08) on developer.mozilla.org

  2. Drag and drop file uploading using JavaScript the article states that the api was changed and links to The File Api has changed (2010-09)

  3. html5-drag-and-drop-multiple-file-upload (2017-11 returns 404) on http://www.appelsiini.net/ (is still live)

but is there a solution that can run on all platforms: Firefox, Chrome and Safari?

Many thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Sorry, at the moment there is no cross browser solution available.

    Current Browser Implementation Issues

    FF, Safari, Chrome, IE (Cross-Browser Issues)

    No recursive folder uploading — as a matter of fact, no folder uploading at all. While this isn’t a show stopper, it does seem kind of silly to allow a user to select a folder in the file upload input box if the browser won’t send all the files inside that folder too.

    Firefox 3.6.*

    This browser supports file drag and drop, however the implementation is quite possibly the worst ever conceived. In order to upload a file that the user dropped, we have to read the entire file into memory and then send it over Ajax to our servers. This works fine for drops of around 10MB. If you try that same operation with a 400MB file, forget it!

    Firefox 4.* (Beta)

    The Mozilla developers are quick ones — they realized the problem with their previous implementation and have created a whole new way to implement drag and drop uploading. The FormData object is a new JavaScript object that allows a web developer to insert file uploads directly into an Ajax request without reading the files into memory first. I was really excited about this and promptly downloaded Firefox 4 which is in its 2nd beta. After playing around with it for less than 5 minutes, I strongly discourage you from trying it yet. My system became incredibly unstable and slow and development was a major pain due to lack of support for Firebug.

    Chrome (latest)

    This browser is by far the best in its implementation! Simple and straightforward, my only complaint here is that you can’t upload a folder and its contents via drag and drop.

    Safari 4.* & 5.*

    Since Safari is built on top of WebKit just like Google Chrome, I expected it to work just as well. Wow, was I mistaken! I tried this in both Safari 4 and Safari 5. While dragging and dropping multiple files into the window works, Safari sends the first file multiple times, instead of sending all the files. Talk about a MAJOR bug. To make it even more interesting, if the user clicks on the drop location, they can select multiple files to upload using the standard file selection dialog — and that works as expected! I can’t wait for Safari to fix this issue.

    Internet Explorer

    To be honest, I haven’t even bothered trying to do drag and drop uploads in Internet Explorer yet. Trying to support IE is a pain due to lack of good development tools and a non-conforming JavaScript engine. Since I haven’t been able to get all the preferred browsers to play nice, I can’t imagine Internet Explorer will be even close.

    source

    • 0