Active3 years, 8 months ago

Native HTML5 Drag and Drop HTML5 Rocks. Table of Contents. Google Chrome supports the ability to drag file objects out from the browser to the desktop. How to Use HTML5 File Drag and Drop Dragging and dropping files from your desktop to a browser is one of the ultimate goals for web application integration. This is the first in a four-part series.

we are using jquery in our project and we were thinking about to implement a function for offering a drag and drop download from our website to the local underlying file system (Desktop for example...).I found some useful links but all of the seem to be outdated:

My questions:

Does anybody knows a overview of Browsers and their versions which support this feature?I read its a part of HTML5 but not every HTML5 browser is supporting this feature. More worse: in one of these links users wrote some Browsers were supporting this feature but after a while the support was removed...
Does anybody knows a up-to-date howto how to implement it 'nowadays'?

Thx in advance!

StephanMStephanM

1 Answer

Pretty much Chrome and Opera these days, most API filesystem support was removed from other browsers and the standard is going to pretty much defunct.

JamesJames

Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.

Not the answer you're looking for? Browse other questions tagged javascriptjqueryhtml5downloaddrag-and-drop or ask your own question.

How To Drag And Drop File To Ipad

Dragging and dropping files from your desktop to a browser is one of the ultimate goals for web application integration. This is the first in a four-part series of posts which describes how to:

enable file dragging and dropping onto a web page element
analyze dropped files in JavaScript
load and parse files on the client
asynchronously upload files to the server using XMLHttpRequest2
show a graphical progress bar while the upload occurs
use progressive enhancement to ensure your file upload form works in any browser (good news for all you IE6 fans!)
code it in plain ol’ JavaScript without a library.

Phew.

Big, Bad Browser Support

Before we begin, this tutorial refers to several cutting-edge HTML5 techniques so expect support to be patchy. The code works today, but it’s possible the APIs will change and browsers will evolve.

Recent versions of Firefox and Chrome support all features and work perfectly.
Opera can parse files in JavaScript, but file dropping and XMLHttpRequest2 uploading is not implemented.
IE and the desktop editions of Safari do not support any of the APIs.
Apple has disabled HTML file upload forms on the iPhone and iPad editions of Safari. Anyone know why?

Finally, note that my code shows the fundamental concepts. There’s little error checking and you would need to adapt it for a production system.

The HTML and CSS

Here’s our standard form with a file input type. The only HTML5 feature is the “multiple” attribute which allows the user to select any number of files.

Html5 Drag And Drop Demo

Drag And Drop File Download Html5 Player

We’ll be uploading files to a server running PHP but the code is much the same no matter what technology you’re using. The hidden MAX_FILE_SIZE value specifies 300,000 bytes — this is used by PHP but we’ll also check it client-side to prevent huge file uploads.

The #filedrag element will be used as our file drag and drop location. The element is hidden in CSS but it will be enabled in JavaScript if drag and drop is supported:

We’ve also defined a .hover class which changes the style when the user has dragged a file on to the element. Browsers don’t apply a :hover style in that situation, but we can add the class with JavaScript when the event occurs.

The File API

The W3C File API provides several objects. We’ll be using:

FileList: represents an array of selected files.
File: represents an individual file.
FileReader: an interface which allows us to read file data on the client and use it within JavaScript.

Attaching JavaScript Events

Time to get our hands dirty with some JavaScript. We’re not using a JavaScript library so, to save our typing fingers, we’ll create a couple of helper functions to return an element by ID and output status messages:

We’ll now check if the File API is available and call an Init() function:

The Init() function:

Sets a “change” event listener to the file input element.
Displays the #filedrag element.
Sets “dragover” and “dragleave” event listeners to change the style of the #filedrag element.
Sets a “drop” event listener for the #filedrag element.
Hides the form submit button — it’s not required since we’ll be analyzing and uploading files as they’re chosen.

Optionally, you could hide the file input element when file dragging is supported. Personally, I prefer to offer both options since dragging and dropping incurs a number of usability issues.

Html5 Drag And Drop List

The XMLHttpRequest.upload method check prevents problems in Opera. The browser supports File, FileList and FileReader, but not drag and drop events or XMLHttpRequest2. It can therefore display file information but we don’t want to show the #filedrag element or remove the submit button.

File Drop Style Change

Few people have experienced file drag and drop in a web browser. In fact, experienced web users may not consider it to be impossible. Therefore, we’ve used an element which states “drop files here”. We also want to indicate when a file has been dragged onto the #filedrag location by changing it’s styling:

Analyzing Dropped or Selected Files

We’re using the same FileSelectHandler() function regardless of whether one or more files was selected using “Browse” or dragged onto the #filedrag location:

The function:

Calls FileDragHover() to remove hover styling and cancel browser events. This is essential otherwise the browser may attempt to display the file.
Fetches a FileList object. This will either be from the file input box (e.target.files) or #filedrag element (e.dataTransfer.files).
Finally, the function loops through all File objects in the FileList and passes it as an argument to the ParseFile() function…

The function outputs information using the three main read-only properties provided by the File object:

Drag And Drop File Upload Jquery Html5

.name: the file name (it does not include path information)
.type: the MIME type, e.g. image/jpeg, text/plain, etc.
.size: the file size in bytes.

Please view the demonstration page in Firefox, Chrome, or Opera (no drag & drop support). You can also download the files to examine the code.

We’ve covered a lot of ground. In my next article, we’ll discover How to Open Dropped Files Using HTML5 and JavaScript…

This article has also been translated into Armenian

If you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like HTML5 & CSS3 For the Real World.

Comments on this article are closed. Have a question about HTML5? Why not ask it on our forums?

Drag And Drop File Download Html5 Player