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:

• The server can't be modified, nor i'm willing to select another server provider.
• It must work at least on Firefox and Chrome (my app is alredy limited to those two browsers).

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:

• The server can't be modified, nor i'm willing to select another server provider.
• It must work at least on Firefox and Chrome (my app is alredy limited to those two browsers).

• javascript
• xmlhttprequest
• mime-types
• multipartform-data

1 Answer 1

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.