In today’s article I would like to write about a very interesting functionality that can be developed using the latest html5 javascript.
In this article I would like to explain how to make a simple drag&drop script for uploading files, using the dragover and drop events that have been added with the new HTML5 javascript update. So again, this functionality will work only on HTML5 compatible web-browsers.

Ok, so let’ start creating our simple file upload functionality, first we will add the drag events:

  1. (function($){
  2.  $(document).ready(function(){
  3.   $('#dragzone').bind('dragover',function(event){
  4.                        $(event.target).css('background-color','red');
  5.    event.stopPropagation();
  6.    event.preventDefault();  
  7.   });
  8.   $('#dragzone').bind('drop',function(event){
  9.    $(event.target).css('background-color','white')
  10.    $.FileUpload($(event.target).attr('path'),event.originalEvent.dataTransfer.files);
  11.    event.stopPropagation();
  12.    event.preventDefault();
  13.   });
  14.  });
  15. })(jQuery);


So what the events will do is that on ‘dragover’, so when we move the file over our ‘dragzone’, we set the color red, and when we drop the file we change the color back to white and send the files that have been dragged to our upload funtion. The upload function will use the new xhr2 object for uploading files using ajax requests.

  1. $.FileUpload = function(path,files)
  2.    {
  3.     for (var x = 0; x < files.length; x++)
  4.     {
  5.       var file = files.item(x);
  6.       var xhr = new XMLHttpRequest();
  7.  
  8.       fileUpload = xhr.upload,
  9.       xhr.onreadystatechange = function() {
  10.         if (xhr.readyState == 4)
  11.         {
  12.          response = $.parseJson(xhr.responseText);
  13.          alert(response.status);
  14.          }
  15.        };
  16.  
  17.      fileUpload.onprogress = function(e){
  18.       if (e.lengthComputable){
  19.         var _progress = Math.round((e.loaded * 100) / e.total);
  20.         if (_progress != 100){
  21.           $('#upload_progress_'+x).text(_progress + '%');
  22.         }
  23.        }
  24.      };
  25.    
  26.      xhr.open("POST", 'index.php?path='+encodeURIComponent(path)+'&name='+encodeURIComponent(file.fileName), true);
  27.      xhr.setRequestHeader("Cache-Control", "no-cache");
  28.      xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
  29.      xhr.setRequestHeader("X-File-Name", encodeURIComponent(file.fileName));
  30.      xhr.setRequestHeader("X-File-Size", file.fileSize);
  31.      xhr.setRequestHeader("Content-Type", "application/octet-stream");
  32.      xhr.send(file);
  33.      }
  34.    }

In the FileUpload function we do the following: first we go thrue all the files (multiple file upload is supported), then we add the ‘onreadystatechange’ event (this will be called when the file finishes uploading), after this we add the ‘onprogress’ event (to show the upload progress of the file) and then we upload the file using a POST request and the ‘send’ function from xhr2. We also send some extra parameters like the name of the file (file.fileName) and a path that we defined as an attribut for the dropzone(this is not mandatory, just an example of sending extra data).