Drag & Drop File Upload With Progress Bar

Here we will be creating a Drag and Drop uploader in Jquery that will  be showing a progress bar for a real time idea of bytes stream transfer at server end.

DROPZONE:


Dropzone is the name given to the content area where we can drop files in the browser. The size of the dropzone depends on the user needs , In this demo we will be making the complete page as a dropzone. For achieving this we have to place a div inside the form tag inside which all other controls of the page will reside:

Markup:

<div id=”dropzone”>

<progress id=”progressBar”  max=”100″ value=”0″>0% complete</progress>

<div id=”divDroppedDocuments”></div>

<input type=”button” id=”btnUpload” value=”Upload”/>

</div>

This Dropzone will be used for the dropping of the files which are going to be uploaded.

CONCEPT:


When we select a file from anywhere on the computer and drags it to the browser ,we have to notify the user what he can do with these files. Like for example we can grey out the background and show a text like ” DROP FILES ” . If the user Drops the files we have to stop the default behavior of showing the files in the browser and collect the files to upload them. If the user doesn’t drops the files then we have to remove the grayed out area or any other style that we placed inside the dragover . For handling these behaviors in jquery we will be using below mentioned three events:

 “dragover”, “dragleave”, “drop”

DRAGOVER:


//Dragover event for the dropzone

$(“#dropzone”).on(“dragover”, function (event) {

//Below code stops the default behaviour

event.preventDefault();

event.stopPropagation();

$(this).addClass(‘dragging’); });

” dragging ” is a class where you can put the background color or other informative animations.

DRAGLEAVE:


//DragLeave event for the dropzone

$(“#dropzone”).on(“dragleave”, function (event) {

event.preventDefault();

event.stopPropagation();

$(this).removeClass(‘dragging’); });

DROP:


In the drop event we will grab the files and store them in global variables and show the end user a template of dropped files having info like name and size of the dropped files.

//Drop event for the dropzone

$(“#dropzone”).on(“drop”, function (e) {

e.preventDefault();

e.stopPropagation();

$(this).removeClass(‘dragging’);

filesToUpload = [];//Global Variable

formData = new FormData();//Global Variable

for (var i = 0; i < e.originalEvent.dataTransfer.files.length; i++)

{

var objDroppedFiles = {};

objDroppedFiles[‘name’] = e.originalEvent.dataTransfer.files[i].name;

objDroppedFiles[‘size’] = e.originalEvent.dataTransfer.files[i].size;

objDroppedFiles[‘extension’] = e.originalEvent.dataTransfer.files[i].type.split(‘/’)[1]; filesToUpload.push(objDroppedFiles);

}

//Genrating templates for showing name and size of the dropped files.

var tableStart = ‘<table class=”tblUpload”>’; var tableEnd = ‘</table>’;

for (var i = 0; i < filesToUpload.length; i++)

{

var tr = “<tr style=’height:50px’><td><label class=’lblUploads’ >Name:</label><input type=’text’ value='” + filesToUpload[i].name + “‘  /></td><td><label class=’lblUploads’>Size: </label></td><td> <label>”+filesToUpload[i].size +”</label></td></tr>” tableStart = tableStart + tr;

}

$(‘#divDroppedDocuments’).html(tableStart + tableEnd);

var files = e.originalEvent.dataTransfer.files;

for (var i = 0; i < files.length; i++)

{

formData.append(‘file’, files[i]);

} });

UPLOADING THE FILES ON BUTTON CLICK:


//Event for Uploading the files

$(‘#btnUpload’).click(function () {

// now post a new XHR request

var xhr = new XMLHttpRequest();

xhr.open(‘POST’, ‘Upload.aspx’, true);//true is for async call

//Function for tracking the progress

function progressFunction(evt) {

var progressBar = document.getElementById(“progressBar”);

if (evt.lengthComputable) { progressBar.max = evt.total; progressBar.value = evt.loaded; }

}

xhr.upload.addEventListener(“progress”, progressFunction, false);

xhr.onload = function () { if (xhr.status === 200) { console.log(‘all done: ‘ + xhr.status); } }; xhr.send(formData); });

This is a plain simple way of uploading a file through Drag and Drop without using any plugin. Hope it helps . Feel free for any assistance related to code blocks

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

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