XHR Level2 with jQuery for file upload

Question

How can I access the raw XHR object from jQuery Ajax? The thing is, the new XMLHttpRequest Level 2 specification provides a sub-property of XHR called upload but apparently jQuery doesn't have it yet. I want to keep using jQuery Ajax but I don't know how to merge the new functionality with current jQuery library.

Answer 1

In new versions of JQuery the raw xhr object is wrapped in jqXhr Object which doesn't have any reference to the new upload property of the xhr and in the documentation is not very clear how to do it either. the way I found to do this, with some extra settings to get a successful jquery-ajax-HTML5 file uploader was:

var formData = new FormData($('#myForm')[0]);
$.ajax({
    url: 'upload.php',
    type: 'POST',
    xhr: function() {
        myXhr = $.ajaxSettings.xhr();
        if(myXhr.upload){
            myXhr.upload.addEventListener('progress',progressHandlerFunction, false);
        }
        return myXhr;
    },
    data: formData,
    cache: false,
    contentType: false,
    processData: false
});

with $.ajaxSettings.xhr() I get the origianal xhr, then I test if it has the property upload to bind a progress event to control a progress(HTML5?) bar. The other settings allow me to send via jquery ajax the form as a FormData object.

Answer 2

A little modification to DannYOs answer. I made a jQuery plugin that you can call on a file input to make it simpler. You just pass it your upload script, then your success function and then your progress function.

$.fn.upload = function(remote,successFn,progressFn) {
    return this.each(function() {

        var formData = new FormData();
        formData.append($(this).attr("name"), $(this)[0].files[0]);

        $.ajax({
            url: remote,
            type: 'POST',
            xhr: function() {
                myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload && progressFn){
                    myXhr.upload.addEventListener('progress',progressFn, false);
                }
                return myXhr;
            },
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            complete : function(res) {
                if(successFn) successFn(res);
            }
        });
    });
}

Usage

$(".myFile").upload("upload.php",function(res) {
    console.log("done",res);
},function(progress) {
    console.log("progress", progress);
});