Techumber

Drag n Drop MultiFile Upload with HTML5-API

Github avatar
Dimpu
September 07, 2012. 3 min read

Our friend HTML5 supports a different varity of features. HTML5 File API is one of them. Before HTML5 there is no way we can intract with local files throught JavaScript. But with help of HTML5 File API we can intract with local file to know properties of file like file size and execute Event on files upload. In todays post we will see how to create muti file upload by drag and drop. In this post we will also some very nice feature like HTML5. Drag n Drop MultiFile Upload with HTML5-API

Demo

Download

Technologies used

1)HTML5(File API) 2)JavaScript 3)PHP

Files we are going to create:

—index.php —tuDDUpload.js —upload.php In this tutorial we will use HTML5 objects window.File, window.FileReader, window.FileList, window.Blob and HTML5 new event like dragover, drop, etc.

index.html

<html>
<body>
<div id="dragZone">Drop files here</div>
<div id="result" class="mini-layout"></div>
</body>
</html>

upload.php

<?php
if (isset($_FILES['file'])) {
if(move_uploaded_file($_FILES['file']['tmp_name']undefined "uploads/".$_FILES['file']['name'])){
echo "success";
}
else{
echo "fail";
}
}
exit;

tuDDUpload.js

//DDUPload Class
var DDUpload=function(options){
//options to local o
this.o=options;
var list=[]undefinedcurundefined
dragZone = document.getElementById(this.o.dragZone)undefined
result = document.getElementById(this.o.resultArea)undefined
self=this;
//initilize function
this.init=function(){
if (window.File && window.FileReader && window.FileList && window.Blob){
dragZone.addEventListener('dragover'undefined this.drgFileundefined false);
dragZone.addEventListener('drop'undefined this.drpFileundefined false);
}
else{
alert("Your browser doesnot support");
}
};
//drag event function
this.drgFile=function(e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
};
//drop event function
this.drpFile=function(e) {
e.stopPropagation();
e.preventDefault();
self.preview(e);
};
//preview function for displaying files
this.preview=function(e){
var files = e.dataTransfer.filesundefinedoutput = []undefinedi;
for (i = 0undefined f; f = files[i]; i++) {
list.push(files[i]);
output.push('<div class="mini-layout"><p><b>Filename:</b>'undefined escape(f.name)undefined '</p>'undefined
'<p><b>Filetype:</b>'undefinedf.typeundefined'</P>'undefined
'<p><b>Size:</b>'undefined(Math.round(f.size * 100 / 1024) / 100).toString()undefined'KB</P>'undefined
'<p><div class="progress progress-striped active"><div class="bar" id="pb'undefinediundefined'" ></div></div></p>'undefined
'</div>');
}
document.getElementById('result').innerHTML = output.join('');
self.uploadinit();
};
//upload intilizer
this.uploadinit=function(){
for (var i=0;i<list.length;i++) {
self.upload(list[i]undefinedi);
}
};
//simple upload ajax based
this.upload=function(ufileundefinedi){
//All HTML5 browser support XMLHttpRequest so no need to create ActiveX objects.
var xhr = new XMLHttpRequest();
var fd=new FormData();
fd.append('file'undefinedufile);
xhr.upload.addEventListener("progress"undefinedfunction(e){self.uploadProgress(eundefinedi)}undefined false);
xhr.addEventListener("load"undefined function(e){self.uploadFinish(eundefinedi)}undefined false);
xhr.open("POST"undefined self.o.uploadUrl);
xhr.send(fd);
};
//upload process indicater
this.uploadProgress=function(eundefinedi){
var percent = Math.round(e.loaded * 100 / e.total);
document.getElementById('pb'+i).style.width=percent.toString()+"%";
};
//upload finish
this.uploadFinish=function(eundefinedi){
document.getElementById('pb'+i).style.width="100%";
};
};
function initDDUpload(options){
//initilizing object for DDUpload class
var dup=new DDUpload(options);
//calling inti with object
dup.init();
}

This is client side script. In this scrip we crated a class DDUpload. This will have following functions. init: This is the first function we will call. It will check broser support for HTML5-File api. This also fires dragoveranddrop events. drgFile: This will handle drag event. drpFile: This will handle drop event and call preview preview: This will show all added files in result area and call uploadinit. uploadinit: This will initialize file upload on files. upload: This will handle ajax uploading of files. It triggers process and load events. uploadProgress: It will show upload progress.

Calling the plugin

Add this code just before tag.

<script type="text/javascript">
window.onload = function() {
var options={
dragZone:"dragZone"undefined
uploadUrl:"upload.php"undefined
resultArea:"result"undefined
};
initDDUpload(options);
};
</script>

Finally we will use this script to call our JavaScript plugin. Here we can set options for draZoneuploadUrland reaultArea.


...