CODEWITHSUNDEEP
javascriptxmlhttprequestmime-typesmultipartform-data
Chiguireitor
Chiguireitor

Reputation: 3306

Changing filename in BlobBuilder to be passed as FormData on XHR

I'm currently trying to upload an ArrayBuffer to a server (which i can't change) that expects the file i'm uploading on a multipart/form-data format. The server extracts from the Content-Disposition part the filename that will be saved and under Content-type the MIME type which will be used when serving the file. Currently, i'm succesful on uploading the file with:

var xhr = new XMLHttpRequest();
var fdata = new FormData();
var bb;

if (WebKitBlobBuilder) {
    bb = new WebKitBlobBuilder();
} else if (MozBlobBuilder) {
    bb = new MozBlobBuilder();
} else if (BlobBuilder) {
    bb = new BlobBuilder();
}

bb.append(obj.array);

fdata.append('file', bb.getBlob("application/octet-stream"));

xhr.open("POST", url, true);
xhr.send(fdata);

But the headers are sent as the browser likes, on Chrome for example:

Content-Disposition: form-data; name="file"; filename="blob"
Content-Type: application/octet-stream;

I've contemplated saving it to a temporary file with FileWriter API and then upload it, but that just isn't right.

When answering, take into account:

Upvotes: 3

Views: 6899

Answers (1)

Chiguireitor
Chiguireitor

Reputation: 3306

Just solved it myself, thanks to a Chromium issue pointing me to the answer on w3c standard draft XMLHttpRequest. Basically i should change:

fdata.append('file', bb.getBlob("application/octet-stream"));

to:

fdata.append('file', bb.getBlob("application/octet-stream"), obj.filename);

And it gives the desired result.

Upvotes: 5

Related Questions