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?

Answer 1

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"} ));