Use File Drag and Drop with Html 5
There is many new features in in HTML 5 and one of them is being able to drag a file from File explorer (Windows or any OS) into the web browser and handling the drop event via script (Javascript in this case). If you’re a Google Mail user you are likely familiar with this feature as Google lets users to attach files to emails using Drag and Drop.
Of course as always not every browser supports the new feature. There are approx. 90% of web browsers support Drag and Drop, including Internet Explorer 7 and above, Firefox 4 and above, Chrome etc but it is strange that Internet Explorer 9 does support Drag & Drop but not with files.
The HTML 5 page I am using is quite simple:
<html> <head> <title> HTML 5 Drag & Drop demo</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="/Scripts/modernizr-2.0.6-development-only.js" type="text/javascript"> </script> </head> <body> <div id='dropTarget' style='height: 100px; width: 100%; background-color: Lime; text-align: center'> Drop files here</div> <ul id='images'> </ul> <script src="Scripts/jquery-1.6.4.js" type="text/javascript"> </script> <script> </script> </body> </html>
Note that I used a <div> with an Identification of dropTarget to drop the files from explorer and there is an <ul> with Identification images where the result will be displayed. Moreoever I used jQuery but the jQueryUI droppable function doesn’t support dragging and dropping files from the explorer at this moment.
I used addEventListener() to add 2 handle event drag over and drop.
$(function () {
if (Modernizr.draganddrop) {
var dropTarget = $(‘#dropTarget’)[0];dropTarget.addEventListener(‘dragover’, function (e) {
e.preventDefault();
});dropTarget.addEventListener(‘drop’, function (e) {
e.preventDefault();if (e.dataTransfer.files === undefined) {
// IE doesn’t support file drops yet.
$(‘#dropTarget’).text(‘Drag & Drop of files is not supported’);
return;
}$.each(e.dataTransfer.files, function () {
var file = this; 2
$(‘<li>’).text(file.name).appendTo(‘#images’);
});
});
}
else {
$(‘#dropTarget’).text(‘Drag & Drop is not supported’);
}
});
The dragover event is real simple, all we need to do is prevent the browser from doing it’s default behavior.
The drop event is more interesting. First of all we need to check the passed argument to see if the is a files array on the dataTransfer object. In the case of Internet Explorer 9 this is not the case. Next we can use the $.each() function as a convenient way of handling the file drops. In this
case all I am doing is showing the file name in the list.
Incoming search terms:
- jquery-1 6 4 js drag sample
- drag and drop html 5 sample
- html5 kinetic drag and drop target
- IE html 5 file drag and drop demo
- ipad html5 drag drop demonstration
- jquery canvas kinetic
- kinetic js droppable
- modernizr drag and drop
- modernizr drag and drop file
- html5 file drag and drop demo
