How to Upload multiple file using drag and drop in jQuery

Posted By : Panaru Chaudhary | 03-Dec-2017

jquery

Drag And Drop is the most useful functionality now days. If you want to upload multiple or single file parallely, you can use it .

Description

This functionality can be implement including jQuery Api. I will tell you step by step how to implement drag and drop.

Step-1 : include jquery liberary in your page.

Step-2 : Adding a div in your page which want to make droppable.

Step-3 :. Handle drag and drop events with jQuery

	
			
			var dragAndDropableDiv = $("#multipleuploadfile");
dragAndDropableDiv.on('dragenter', function (e) 
{
    e.stopPropagation();
    e.preventDefault();
    $(this).css('border', '2px solid #0B85A1');
});
dragAndDropableDiv.on('dragover', function (e) 
{
     e.stopPropagation();
     e.preventDefault();
});
dragAndDropableDiv.on('drop', function (e) 
{
 
     $(this).css('border', '2px dotted #0B85A1');
     e.preventDefault();
     var files = e.originalEvent.dataTransfer.files;
 
     //We need to send dropped files to Server
 
     uploadFile(files,obj);
});

		

Step-4 Set the file contents in FormData() object when the files are dropped.

	
			
			function fileUpload(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);
       
  uploadViaServlet(fd,status);
 
   }
}

		

Step- 5 Send param data to Server using jQuery AJAX API

                uploadViaServlet = function(files,index,progressbarUrl) 
     {
    if( typeof files == 'undefined' && files.size == 0){
    	return false;
        }
	    var divFileArea = document.getElementById( "fileUploadDiv" );
	       divFileArea.style.display = 'block';		
		var form = document.forms['uploadFormulaire'+index];
                var url  = $JQ(form).prop('action')
		var params = $JQ( form ).serialize();
		var paramData = deparam(params);		
		 var data = new FormData();
		    $JQ(files).each(function(key, value)
		    {		   
		        data.append('fileName'+key, value);
		    });
		    $JQ.each(paramData, function(key, value)
				    {		    	  
				      data.append(key, value);
				    });	

		$JQ.ajax(url, 
				{
		    xhr: function() {
		        var xhr = new window.XMLHttpRequest();
		        // Upload progress
		        xhr.upload.addEventListener("progress", function(event){
		            if (event.lengthComputable) {
		                var percentComplete = event.loaded / event.total;
		        
		               $JQ.ajax({
		            	   url : progressbarUrl,
		            	   asynchronous:true,
		            	   method: 'get',
		            	   data: 'status=DONE',
		            	   success : function(response)
		            	     {
		            		   $JQ("#progressBarDiv"+index).html(response);
		            	     }
		               })
		            }
		        }, false);

		        return xhr;

				},
			success: function(){	
				switch(index) {
			    case "1":
			    	 reloadRfxAttachment();
			    	 $JQ("#progressBarDiv"+index).html('');
			    	 break;
			    case "2":	
			    	 reloadPartAttachment();
			    	 $JQ("#progressBarDiv"+index).html('');
			        break;			
			       }				
			},			     
	        contentType: false,
	        processData: false,
	    	type: 'POST',
	        data:data,
	        cache: false
		});
       }