AJAX File Upload

In a previous post I've described how to upload files asynchronously on cross domains using jQuery and Upload plugin. In this article I will discuss 3 more approaches supported by modern browsers for ajax file upload using raw javascript.

PREPARATION

Sending form data to a server is accomplished by the XMLHttpRequest Interface. For later use and more convenience let's define a function for sending AJAX requests.

<script>
var ajaxFileUpload = function (data) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "ajax-upload.php", true);
    xhr.addEventListener("load", function (e) {
        // file upload is complete
        console.log(xhr.responseText);
    });
    xhr.send(data);
};
</script>

Ensure that the browser supports HTML5 File API before attempt to reading a file.

<script>
if (window.File && window.FileList && window.Blob && window.FileReader && window.FormData) {
    // proceed with file upload
} else {
    // browser doesn't supports File API
}
</script>

To read a file, stored at the user computer or transferred via Drag & Drop, use the following approaches:

• FormData Interface
• FileList Interface
• FileReader API

READING A FILE WITH FORMDATA API

• HTML form - In this case a standard HTML form element already exists in the web page. Giving a form reference to the FormData() constructor creates a new FormData object, that's all we need to perform prior the sending of data to server. Much the same like the AJAX Form submit technique.

<form action="" method="post">
    <input type="text" name="user_name" />
    <input type="file" name="user_file" />
    <button type="submit">Submit</button>
</form>

<script>
var form = document.querySelector("form");

form.addEventListener("submit", function (e) {
    var fdata = new FormData(this);

    // Optional. Append custom data.
    fdata.append('user_city', 'Los Angeles');

    ajaxFileUpload(fdata);

    // Prevents the standard submit event
    e.preventDefault();
    return false;
}, false);
</script>

• Programmatically - Having a HTML form is not necessary to upload a file. Just create a FormData object and manually adjust its elements using the .append() and/or .set() methods.

<script>
var fdata = new FormData();
fdata.append("user_name", "Dimitar Ivanov");
fdata.append("user_file", "/path/to/file.png");
// Overwrite the value of 'user_file' key
fdata.set("user_file", "/path/to/cv.pdf", "Dimitar-CV.pdf");

ajaxFileUpload(fdata);
</script>

READING A FILE WITH FILELIST API

All HTML <input> elements have an files array on them accessed via the files property. This array contains a list of files selected with <input type="file"> element.

<form action="" method="post">
    <input type="text" name="nickname" />
    <input type="file" name="cv" />
    <input type="file" name="avatar" />
    <button type="submit">Submit</button>
</form>

<script>
var input = document.querySelector('input[type="file"]');
var fdata = new FormData();
var file;
for (var i = 0, iCnt = input.files.length; i += 1) {
    file = input.files[i];
    // or using the .item() method, it's the same
    // file = input.files.item(i);
    fdata.append(file.name, file);
}

// Optional. Append custom data.
fdata.append("sex", "male");

ajaxFileUpload(fdata);
</script>

READING A FILE WITH FILEREADER API

Web apps are able to read the content of files with using the FileReader API.

<script>
var ajaxFileUpload = function (file) {
    var reader = new FileReader()
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "ajax-upload.php", true);
    xhr.addEventListener("load", function (e) {
        // file upload is complete
        console.log(xhr.responseText);
    });
    reader.addEventListener("load", function (e) {
        xhr.sendAsBinary(e.target.result);
    });
    reader.readAsBinaryString(file);
};

ajaxFileUpload('https://static.zinoui.com/img/blog/ajax-file-upload.png');
</script>

SUMMARY

If you have any thoughts about the discussed approaches for ajax file upload, please post a comment below.