Javascript: Sending arrayBuffer using XMLHttpRequest

Question

I want to send a multipart form using XMLHttpRequest. The file I want to attach is a jpg file. Appending the file to the FormData object works fine.

But I'd like to process the image file before sending it. Therefore I have a library that takes a Uint8Array as input and output as well. So I have the processed image as UInt8Array.

I tried to use

form.append("picture", new Blob(fileAsArray, {type: "image/jpg"} ));

but it creates an octet/stream. So how can I send the Uint8Array via XMLHttpRequest multipart/form so that the server sees the same as when sending the file object?

Convert it to base64 string with var base64Data = btoa(String.fromCharCode.apply(null, yourArray)); — adeneo
– adeneo, Commented Feb 28, 2015 at 21:38

Bergi · Accepted Answer · 2015-02-28 21:42:17Z

14

Notice that the Blob constructor takes an array of typed arrays (or other sources) as its parameter. Try

form.append("picture", new Blob([fileAsArray], {type: "image/jpg"} ));

answered Feb 28, 2015 at 21:42

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fernando · Accepted Answer · 2019-07-26 16:31:41Z

2

Probably it isn't the direct response to the question, but I have created a function to upload an ArrayBuffer as a file using not XMLHttpRequest, but fetch.

So here is my version with Javascript Fetch:

function uploadArrayBufferRawImage(arraybuffer)
{
    var formData = new FormData();
    formData.append("image",
                     new Blob([arraybuffer], {type: "image/x-myrawformat-raw"}),
                     new Date().toJSON() + ".raw");
    fetch("scripts/store_image.php", {
        method: 'POST',
        body: formData
    }).then(function(resp)
    {
        return resp.json();
    }).then(function(json)
    {
        console.log(json);
    });
}

answered Jul 26, 2019 at 16:31

Fernando

1,5252 gold badges15 silver badges36 bronze badges

1 Comment

Mike 'Pomax' Kamermans Over a year ago

No need for a non-existent image/x-myrawformat-raw, just use application/octet-stream, the mime-type for "arbitrary binary data" as outlined in RFC 2046. But if you know the image format, which they do, then use that (image/jpeg in this case).

Collectives™ on Stack Overflow

Javascript: Sending arrayBuffer using XMLHttpRequest

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related