Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery equivalent to XMLHttpRequest's upload?

Working with HTML5's File API, the upload is made via an object called upload in the XMLHttpRequest. This is the tutorial I'm working with (and the Google cache mirror since it's down at the moment). This is the relevant part:

// Uploading - for Firefox, Google Chrome and Safari
xhr = new XMLHttpRequest();

// Update progress bar
xhr.upload.addEventListener("progress", function (evt) {

As you can see, to track the upload progress, the XMLHttpRequest object has a property named upload, which we can add an event handler.

My question is: has jQuery an equivalent?. I'm attempting to leave the code as clean as and cross-browser compatible as possible, for whenever Microsoft thinks it's a good idea (although it sounds like it will be in 2012 or 2013).

like image 422
metrobalderas Avatar asked Mar 01 '11 16:03

metrobalderas


People also ask

What is XMLHttpRequest in JavaScript?

XMLHttpRequest is a built-in browser object that allows to make HTTP requests in JavaScript. Despite of having the word “XML” in its name, it can operate on any data, not only in XML format. We can upload/download files, track progress and much more. Right now, there’s another, more modern method fetch, that somewhat deprecates XMLHttpRequest.

How do I send a GET request using XMLHttpRequest?

// 1. Create a new XMLHttpRequest object let xhr = new XMLHttpRequest(); // 2. Configure it: GET-request for the URL /article/.../load xhr.open('GET', '/article/xmlhttprequest/example/load'); // 3. Send the request over the network xhr.send(); // 4.

How to create an XMLHttpRequest object with callback function?

Syntax for creating an XMLHttpRequest object: A callback function is a function passed as a parameter to another function. In this case, the callback function should contain the code to execute when the response is ready. To send a request to a server, you can use the open () and send () methods of the XMLHttpRequest object:

What are the properties of an XMLHttpRequest object?

XMLHttpRequest Object Properties Property Description onload Defines a function to be called when the ... onreadystatechange Defines a function to be called when the ... readyState Holds the status of the XMLHttpRequest. ... responseText Returns the response data as a string 3 more rows ...


1 Answers

Here is what I came up with to get around the issue. The $.ajax() call allows to provide a callback to generate the XHR. I just generate one before calling the request, set it up and then create a closure to return it when $.ajax() will need it. It would have been much easier if they just gave access to it through jqxhr, but they don't.

var reader = new FileReader();

reader.onloadend = function (e) {
    var xhr, provider;

    xhr = jQuery.ajaxSettings.xhr();
    if (xhr.upload) {
        xhr.upload.addEventListener('progress', function (e) {
            // ...
        }, false);
    }   
    provider = function () {
        return xhr;
    };  

    // Leave only the actual base64 component of the 'URL'
    // Sending as binary ends up mangling the data somehow
    // base64_decode() on the PHP side will return the valid file.
    var data = e.target.result;
    data = data.substr(data.indexOf('base64') + 7); 

    $.ajax({
        type: 'POST',
        url: 'http://example.com/upload.php',
        xhr: provider,
        dataType: 'json',
        success: function (data) {
            // ...
        },  
        error: function () {
            // ...
        },  
        data: {
            name: file.name,
            size: file.size,
            type: file.type,
            data: data,
        }   
    }); 
};  
reader.readAsDataURL(file);
like image 124
Louis-Philippe Huberdeau Avatar answered Oct 05 '22 22:10

Louis-Philippe Huberdeau