van an nguyen

Drag and drop files and upload them using Ajax/Xhr2

Uploading files using XMLHttpRequest level 2 (XHR2)

This time, let us mash-up a couple of examples. Let’s combine the upload of files using XHR2, with progress monitoring (we worked on in the 3.2 lectures) with one of our drag and drop examples. To achieve this, we re-use the method called uploadAllFilesUsingAjax() and add a <progress> element to the drag and drop example.

example

Try this interactive example at JSBin (this example does not work on CodePen. We are using a fake remote server and it cancels the connection as soon as we try to connect):

example that uses drag'n'drop and a progress element for monitoring the ajax upload of the files

Source code extract (we omitted the CSS):

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <style>
  5.      …
  6.    </style>
  7.    
  8.      function dragLeaveHandler(event) {
  9.        console.log(“drag leave”);
  10.        // Set style of drop zone to default
  11.        event.target.classList.remove(‘draggedOver’);
  12.      }
  14.      function dragEnterHandler(event) {
  15.        console.log(“Drag enter”);
  16.        // Show some visual feedback
  17.        event.target.classList.add(‘draggedOver’);
  18.      }
  20.      function dragOverHandler(event) {
  21.        //console.log(“Drag over a droppable zone”);
  22.        // Do not propagate the event
  23.        event.stopPropagation();
  24.        // Prevent default behavior, in particular when we drop images
  25.        // or links
  26.        event.preventDefault();
  27.      }
  29.      function dropHandler(event) {
  30.        console.log(‘drop event’);
  32.        // Do not propagate the event
  33.        event.stopPropagation();
  34.        // Prevent default behavior, in particular when we drop images
  35.        // or links
  36.        event.preventDefault();
  38.        // reset the visual look of the drop zone to default
  39.        event.target.classList.remove(‘draggedOver’);
  42.        // get the files from the clipboard
  43.        var files = event.dataTransfer.files;
  44.        var filesLen = files.length;
  45.        var filenames = “”;
  47.        // iterate on the files, get details using the file API
  48.        // Display file names in a list.
  49.        for(var i = 0 ; i  filesLen ; i++) {
  50.           filenames += ‘\n’ + files[i].name;
  51.           // Create a li, set its value to a file name, add it to the ol
  52.           var li = document.createElement(‘li’);
  53.           li.textContent = files[i].name;
  54.           document.querySelector(“#droppedFiles”).appendChild(li);
  55.        }
  56.        console.log(files.length + ‘ file(s) have been dropped:\n’
  57.                                 + filenames);
  59.        uploadAllFilesUsingAjax(files);
  60.      }
  62.      function uploadAllFilesUsingAjax(files) {
  63.        var xhr = new XMLHttpRequest();
  64.        xhr.open(‘POST’, ‘upload.html’);
  66.        xhr.upload.onprogress = function(e) {
  67.           progress.value = e.loaded;
  68.           progress.max = e.total;
  69.        };
  71.        xhr.onload = function() {
  72.          alert(‘Upload complete!’);
  73.        };
  75.        var form = new FormData();
  76.        for(var i = 0 ; i  files.length ; i++) {
  77.           form.append(‘file’, files[i]);
  78.        }
  80.        // Send the Ajax request
  81.        xhr.send(form);
  82.      }
  83.   
  84. </head>
  85. <body>
  86. <h2>Drop your files here!</h2>
  87.  id=“droppableZone” ondragenter=“dragEnterHandler(event)“
  88.                          ondrop=“dropHandler(event)“
  89.                          ondragover=“dragOverHandler(event)“     
  90.                          ondragleave=“dragLeaveHandler(event)“>
  91.      Drop zone
  92.      
       id=“droppedFiles”>
  • <br/>
  •  Uploading progress: <progress id=“progress”></progress>
  • <body>
  • <html>

    • We have highlighted the interesting parts in the example!

    We build (line 75) an object of type FormData (this comes from the standard JavaScript DOM API level 2), we fill this object with the file contents (line 77), then we send the Ajax request (line 81), and monitor the upload progress (lines 66-69).

    Instead of uploading all the files at once, it might be interesting to upload one file at a time with visual feedback, such as: “uploading file MichaelJackson.jpg…..”. We will leave this exercise up to you.