How to attach FormData to an XMLHttpRequest

Question

I have a jquery request like this

    function sendData() {

        var formData = new FormData($("#myform")[0]);
        $.ajax({
            type: 'POST',
            url: "/process",
            data: formData,
            dataType: 'json',
            contentType:false,
            cache:false,
            processData:false,
            timeout: 30 * 1000,
            beforeSend: function( xhr ) {
            },
            success: function(jsonData,status,xhr) {
            },
            error: function(data,status,xhr) {
            }
        });
    }

which works fine for uploading an image and sending it to server. But it does not handle binary return types (for receiving images in binary format).

Then I have this other code here

    // http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/
    function fetchBlob(uri, callback) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', uri, true);
        xhr.responseType = 'arraybuffer';

        xhr.onload = function(e) {
            if (this.status == 200) {
                var blob = this.response;
                if (callback) {
                    callback(blob);
                }
            }
        };
        xhr.send();
    };

which handles the specification I need. But the problem is, how do I modify this working code so that I can attach a FormData() object with an image?

Thanks

see this answer, it would be useful http://stackoverflow.com/a/31001452/926333 — Girish, Aug 19 '15 at 04:44
possible duplicate http://stackoverflow.com/a/10646659/1061944 — Murtaza Khursheed Hussain, Aug 19 '15 at 04:51

score 1 · Answer 1 · answered Aug 19 '15 at 04:38

You can attach it as below:

function fetchBlob(uri, callback) {
    var formData = new FormData($("#myform")[0]); 
    var xhr = new XMLHttpRequest();
    xhr.open('GET', uri, true);
    xhr.responseType = 'arraybuffer';

    xhr.onload = function(e) {
        if (this.status == 200) {
            var blob = this.response;
            if (callback) {
                callback(blob);
            }
        }
    };
    xhr.send(formData); //attach it here.
}

SOURCE

I tried it, but the node.js isn't able to detect the image in the data. — sneaky, Aug 19 '15 at 04:50

score 0 · Answer 2 · answered Aug 26 '15 at 15:03

The modification the code needs it to change the request type to POST and pass the FormData object to the send method

// http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/
function fetchBlob(uri, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', uri, true);
    xhr.responseType = 'arraybuffer';
    var formData = new FormData($("#myform")[0]);
    xhr.onload = function(e) {
        if (this.status == 200) {
            var buffer = this.response;
            if (callback) {
                callback(buffer);
            }
        }
    };
    xhr.send(formData);
}

How to attach FormData to an XMLHttpRequest

2 Answers2