Javascript: Sending arrayBuffer using XMLHttpRequest

javascript xmlhttprequest multipartform-data arraybuffer
bebo picture bebo · Feb 28, 2015 · Viewed 7.1k times · Source

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

Bergi picture Bergi · Feb 28, 2015

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

Related questions

How can I upload files asynchronously?

I would like to upload a file asynchronously with jQuery. Instead of the file being uploaded, I am only getting the filename. What can I do to fix this problem?

Read More
How to read a local text file?

I’m trying to write a simple text file reader by creating a function that takes in the file’s path and converts each line of text into a char array, but it’s not working. function readTextFile() { var rawFile = …

Read More
Send POST data using XMLHttpRequest

I'd like to send some data using an XMLHttpRequest in JavaScript. Say I have the following form in HTML: <form name="inputform" action="somewhere" method="post"> <input type="hidden" value="person" name="user"> <input type="…

Read More