HTML5 Drag and Drop File Upload with JQuery

Today we will see how to upload files with the wonderful Drag And Drop feature of HTML5 and JQuery with AJAX.

Lets begin the tutorial.

Drag And Drop FIle Upload

Drag And Drop FIle Upload

Live Demo  Download

Step 1

Add the Javascript library JQuery for Ajax


<script src="jquery.min.js"></script>

Step 2

Add a div tag to body which handles the file drag and drop

<div id="draganddrophandler" align="center">Drag and Drop Files Here</div>

Step 3

Now add the styles to the tags to identify when files are dropped onto the dragandrophandler

#draganddrophandler{
 border:2px dotted #0B85A1;
 width:400px;
 color:#92AAB0;
 height:200px;
 text-align:center;vertical-align:middle;
 padding:10px 10px 10 10px;
 margin-bottom:10px;
 font-size:200%;
 }
 .progressBar {
 width: 200px;
 height: 22px;
 border: 1px solid #ddd;
 border-radius: 5px;
 overflow: hidden;
 display:inline-block;
 margin:0px 10px 5px 5px;
 vertical-align:top;
 }

 .progressBar div {
 height: 100%;
 color: #fff;
 text-align: right;
 line-height: 22px; /* same as #progressBar height if we want text middle aligned */
 width: 0;
 background-color: #0ba1b5; border-radius: 3px;
 }
 .statusbar
 {
 border-top:1px solid #A9CCD1;
 min-height:25px;
 width:700px;
 padding:10px 10px 0px 10px;
 vertical-align:top;
 }
 .statusbar:nth-child(odd){
 background:#EBEFF0;
 }
 .filename
 {
 display:inline-block;
 vertical-align:top;
 width:250px;
 }
 .filesize
 {
 display:inline-block;
 vertical-align:top;
 color:#30693D;
 width:100px;
 margin-left:10px;
 margin-right:5px;
 }
 .abort{
 background-color:#A8352F;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 border-radius:4px;display:inline-block;
 color:#fff;
 font-family:arial;font-size:13px;font-weight:normal;
 padding:4px 15px;
 cursor:pointer;
 vertical-align:top
 }

Step 4

Handle Drag and Drop events with JQuery

var obj = $('#draganddrophandler');
 obj.on('dragenter',function(e){
 e.stopPropagation();
 e.preventDefault();
 $(this).css('border','2px solid #0B85A1');
 });
 obj.on('dragover',function(e)
 {
 e.stopPropagation();
 e.preventDefault();
 });
 obj.on('drop',function(e)
 {
 $(this).css('border','2px dotted #B85A1');
 e.preventDefault();
 var files = e.originalEvent.dataTransfer.files; //get all the files from drop event

 handleFileUpload(files,obj); //function that handles all the file drag-and-drop
 });

If the files are dropped outside the DIV,we have to prevent the page from redirecting to another.


$(document).on('dragenter',function(e)
{
e.stopPropagation();
e.preventDefault();
});
$(document).on('dragover',function(e)
{
e.stopPropagation();
e.preventDefault();
obj.css('border','2px dotted #B85A1');
});
$(document).on('drag',function(e)
{
e.stopPropagation();
e.preventDefault();
});

Step 5

Read the files from the HTML5 FormData() object.


function handleFileUpload(files,obj)
{
for(var i=0;i<files.length;i++)
{
var fd = new FormData();
fd.append('file',files[i]);
var status = new createStatusbar(obj);
status.setFileNameSize(files[i].name,files[i].size);
sendFileToServer(fd,status);
}
}

Step 6

Sending FormDat() to the server using JQuery AJAX API


function sendFileToServer(formData,status)
{
var uploadURL ="./upload.php"; //Upload URL
var extraData ={}; //Extra Data.
var jqXHR=$.ajax({
xhr: function() {
var xhrobj = $.ajaxSettings.xhr();
if (xhrobj.upload) {
xhrobj.upload.addEventListener('progress', function(event) {
var percent = 0;
var position = event.loaded || event.position;
var total = event.total;
if (event.lengthComputable) {
percent = Math.ceil(position / total * 100);
}
//Set progress
status.setProgress(percent);
}, false);
}
return xhrobj;
},
url: uploadURL,
type: "POST",
contentType:false,
processData: false,
cache: false,
data: formData,
success: function(data){
status.setProgress(100);

$("#status1").append("File upload Done<br>");
}
});

status.setAbort(jqXHR);
}

That’s it! Its so simple. Now let’s put all these lines together.

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
<style>
body{
padding:70px;
}
.navbar a{
color:turquoise !important;
}
#draganddrophandler{
border:2px dotted #0B85A1;
width:400px;
color:#92AAB0;
height:200px;
text-align:center;vertical-align:middle;
padding:10px 10px 10 10px;
margin-bottom:10px;
font-size:200%;
}
.progressBar {
width: 200px;
height: 22px;
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
display:inline-block;
margin:0px 10px 5px 5px;
vertical-align:top;
}

.progressBar div {
height: 100%;
color: #fff;
text-align: right;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: #0ba1b5; border-radius: 3px;
}
.statusbar
{
border-top:1px solid #A9CCD1;
min-height:25px;
width:700px;
padding:10px 10px 0px 10px;
vertical-align:top;
}
.statusbar:nth-child(odd){
background:#EBEFF0;
}
.filename
{
display:inline-block;
vertical-align:top;
width:250px;
}
.filesize
{
display:inline-block;
vertical-align:top;
color:#30693D;
width:100px;
margin-left:10px;
margin-right:5px;
}
.abort{
background-color:#A8352F;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;display:inline-block;
color:#fff;
font-family:arial;font-size:13px;font-weight:normal;
padding:4px 15px;
cursor:pointer;
vertical-align:top
}
</style>
<script>
function sendFileToServer(formData,status)
{
var uploadURL ="./upload.php"; //Upload URL
var extraData ={}; //Extra Data.
var jqXHR=$.ajax({
xhr: function() {
var xhrobj = $.ajaxSettings.xhr();
if (xhrobj.upload) {
xhrobj.upload.addEventListener('progress', function(event) {
var percent = 0;
var position = event.loaded || event.position;
var total = event.total;
if (event.lengthComputable) {
percent = Math.ceil(position / total * 100);
}
//Set progress
status.setProgress(percent);
}, false);
}
return xhrobj;
},
url: uploadURL,
type: "POST",
contentType:false,
processData: false,
cache: false,
data: formData,
success: function(data){
status.setProgress(100);

$("#status1").append("File upload Done<br>");
}
});

status.setAbort(jqXHR);
}

var rowCount=0;
function createStatusbar(obj)
{
rowCount++;
var row="odd";
if(rowCount %2 ==0) row ="even";
this.statusbar = $("<div class='statusbar "+row+"'></div>");
this.filename = $("<div class='filename'></div>").appendTo(this.statusbar);
this.size = $("<div class='filesize'></div>").appendTo(this.statusbar);
this.progressBar = $("<div class='progressBar'><div></div></div>").appendTo(this.statusbar);
this.abort = $("<div class='abort'>Abort</div>").appendTo(this.statusbar);
obj.after(this.statusbar);

this.setFileNameSize = function(name,size)
{
var sizeStr="";
var sizeKB = size/1024;
if(parseInt(sizeKB) > 1024)
{
var sizeMB = sizeKB/1024;
sizeStr = sizeMB.toFixed(2)+" MB";
}
else
{
sizeStr = sizeKB.toFixed(2)+" KB";
}

this.filename.html(name);
this.size.html(sizeStr);
}
this.setProgress = function(progress)
{
var progressBarWidth =progress*this.progressBar.width()/ 100;
this.progressBar.find('div').animate({ width: progressBarWidth }, 10).html(progress + "% ");
if(parseInt(progress) >= 100)
{
this.abort.hide();
}
}
this.setAbort = function(jqxhr)
{
var sb = this.statusbar;
this.abort.click(function()
{
jqxhr.abort();
sb.hide();
});
}
}
function handleFileUpload(files,obj)
{
for(var i=0;i<files.length;i++)
{
var fd = new FormData();
fd.append('file',files[i]);
var status = new createStatusbar(obj);
status.setFileNameSize(files[i].name,files[i].size);
sendFileToServer(fd,status);
}
}
$(document).ready(function()
{
var obj = $('#draganddrophandler');
obj.on('dragenter',function(e){
e.stopPropagation();
e.preventDefault();
$(this).css('border','2px solid #0B85A1');
});
obj.on('dragover',function(e)
{
e.stopPropagation();
e.preventDefault();
});
obj.on('drop',function(e)
{
$(this).css('border','2px dotted #B85A1');
e.preventDefault();
var files = e.originalEvent.dataTransfer.files;

handleFileUpload(files,obj);
});
$(document).on('dragenter',function(e)
{
e.stopPropagation();
e.preventDefault();
});
$(document).on('dragover',function(e)
{
e.stopPropagation();
e.preventDefault();
obj.css('border','2px dotted #B85A1');
});
$(document).on('drag',function(e)
{
e.stopPropagation();
e.preventDefault();
});
});
</script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="./">Demos</a>
</div>
<div class="collapse navbar-collapse">
<ul class="navbar-nav nav navbar-right ">
<li class="login"><a href="https://kmvkrish.wordpress.com" title="Tutorials">Go to Tutorial</a></li>
</ul>
</div>
</div>
</div><br/><br/><br/><br/>
<div class="container">
<div id="draganddrophandler" align="center">Drag and Drop Files Here</div>
<br><br>
<div id="status1"></div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s