Uploading File Using XMLHttpRequest Level 2

This post will show how to do a file upload and show progress using XMLHttpRequest level 2 API. This is to gain fundamental understanding of the low level API only. In real life, I strongly recommend using a higher level API such as jQuery. For that, read my earlier article.

First, create the form:

<!DOCTYPE html>

<input type="file" id="fileInput"/>
<button onclick="startUpload();">Upload</button>
<progress id="progressBar" max="100" value="0"/>


This create a very simple form with a file input, button and a progress bar.


. Pay attention to the DOCTYPE. We need that for HTML5.

Now, the script that does the upload:

function startUpload() {
    var fileInput = document.getElementById("fileInput");

    if (fileInput.files.length == 0) {
        alert("Please choose a file");
    var progressBar = document.getElementById("progressBar");
    var xhr = new XMLHttpRequest();

    xhr.upload.onprogress = function(e) {
        var percentComplete = (e.loaded / e.total) * 100;
        progressBar.value = percentComplete;

    xhr.onload = function() {
        if (xhr.status == 200) {
            alert("Sucess! Upload completed");
        } else {
            alert("Error! Upload failed");
    xhr.onerror = function() {
        alert("Error! Upload failed. Can not connect to server.");
    progressBar.value = 0;
    xhr.open("POST", "ajax-upload", true);
    xhr.setRequestHeader("Content-Type", fileInput.files[0].type);

This will send the file contents as the body of the HTTP request. It is essential that you set the Content-Type header. Otherwise, some browsers will set it to “application/x-www-form-urlencoded”. The server will then treat the request body as form input parameter and will try to parse it. Which will fail.

The server side to read the file contents is easy. Here is a code snippet for a Java servlet.

protected void doPost(HttpServletRequest request, HttpServletResponse response) 
  throws ... {
    InputStream is = request.getInputStream();
    //Read the file contents from the input stream
    byte buff[] = new byte[256];
    int len;

    while ((len = is.read(buff)) > 0) {

When you upload the file, the progress bar should indicate the amount of data uploaded.


9 thoughts on “Uploading File Using XMLHttpRequest Level 2

  1. This valuable blog, “Uploading File Using XMLHttpRequest
    Level 2 | mobiarch” demonstrates that you actually understand just
    what exactly you’re talking about! I really thoroughly approve. With thanks -Zak

    • Yes, you can use any technology in the server side. All you have to do is read the uploaded data from the request body. In Java, this data is exposed through an InputStream. Other technologies may use other ways of giving you access to this data.

    • Hi, this can be done using basic Ajax programming. The server needs to send a response back. Please read up on basic Ajax using Java Servlet or whatever is your server platform.

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