van an nguyen

Uploading files and monitoring progress

Uploading binary files with XHR2

Here is an example that uses a FormData object for uploading one or more files to an HTTP server.

Notice that the URL of the server is fake, so the request will fail. However, the simulation takes time, and it is interesting to see how it works.

We will show full examples of real working code with server-side PHP source, during the “File API, drag and drop and XHR2” lecture, later this week..

Try the example on JSBin:

file upload example 1

Source code of the example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.    <meta charset=“utf-8” />
  5.    <title>File upload with XMLHttpRequest level 2 and HTML5</title>
  6. </head>
  8. <body>
  9. <h1>Example of XHR2 file upload</h1>
  10.   Choose a file and wait a little until it is uploaded (on a fake  
  11.   server). A message should pop up once the file is uploaded 100%.
  12. <p>
  13. <input id=“file” type=“file” />
  14. </p>
  16. var fileInput = document.querySelector(‘#file’);
  18. fileInput.onchange = function() {
  19.    var xhr = new XMLHttpRequest();
  20.    xhr.open(‘POST’, ‘upload.html’); // With FormData,
  21.                                     // POST is mandatory
  23.    xhr.onload = function() {
  24.      alert(‘Upload complete !’);
  25.    };
  27.    var form = new FormData();
  28.    form.append(‘file’, fileInput.files[0]);
  29.    // send the request
  30.    xhr.send(form);
  31. };
  33. </body>
  34. </html>

Explanations:

    • Line 18: callback called when the user selects a file.
    • Lines 19-20: preparation of the XHR2 request.
    • Lines 27-30: a FormData object is created (this will contain the (MIME) multipart form-data which will be sent by the POST request).
    • Line 30: the request is sent, with the FormData object passed as a parameter (all data is sent).
    • Line 23: when the file is completely uploaded, the onload listener is called and an alert message is displayed.

Monitor the upload progress

Here is a more user-friendly example. It is basically the same, but this time, we’ll monitor the progress of the upload using a method similar to that used for monitoring file downloads:

    • We use a <progress> element and its two attributes value and max.
    • We also bind an event handler to the progress event that an XMLHttpRequest will trigger. The event has two properties: loaded and totalthat respectively correspond to the number of bytes that have been uploaded, and to the total number of bytes we need to upload (i.e., the file size).

file upload with progress bar

Here is the code of such an event listener:

  1. xhr.upload.onprogress = function(e) {
  2.   progress.value = e.loaded; // number of bytes uploaded
  3.   progress.max = e.total;    // total number of bytes in the file
  4. };

Try the example on JSBin:

Code from this example (nearly the same as previous example’s code):

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.    <meta charset=“utf-8” />
  5.    <title>HTML5 file upload with monitoring</title>
  6. </head>
  8. <body>
  9. <h1>Example of XHR2 file upload, with progress bar</h1>
  10. Choose a file and wait a little until it is uploaded (on a fake server).
  11. <p>
  12. <input id=“file” type=“file” />
  13. <br/><br/>
  14. <progress id=“progress” value=0></progress>
  17.    var fileInput = document.querySelector(‘#file’),
  18.    progress = document.querySelector(‘#progress’);
  20.    fileInput.onchange = function() {
  21.      var xhr = new XMLHttpRequest();
  22.      xhr.open(‘POST’, ‘upload.html’);
  24.      xhr.upload.onprogress = function(e) {
  25.        progress.value = e.loaded;
  26.        progress.max = e.total;
  27.      };
  29.      xhr.onload = function() {
  30.      alert(‘Upload complete!’);
  31.    };
  33.    var form = new FormData();
  34.    form.append(‘file’, fileInput.files[0]);
  36.    xhr.send(form);
  37. };
  39. </body>
  40. </html>

The only difference between these two worked-examples is the onprogress listener which updates the progress bar’s value and maxattributes. 

Leave a comment