I'm working on a webapp that uses several cutting-edge WebKit features. It essentially does this: reads a local file with the FileReader, unzips each file into a string using a JavaScript unzip library, and POSTs each file using XMLHttpRequest. This works great for text files, but unfortunately it corrupts binary files (in this case, images). Firefox has a sendAsBinary method that solves this problem, but it is non-standard, and more to the point, it doesn't work on WebKit/Chrome which we depend on for other features.

There are a TON of workarounds, and so far none of them work for me:

• Mocking a file upload request with headers, boundaries, and so forth in a long string (like this).
• Setting a bunch of headers on the xhr object (as such)
• Using the BlobBuilder, appending the string to the builder, and using getBlob to get a blob to upload (as remended in the Chrome issue thread about this)

What I'm looking for, most of all, is a forward-patible solution. Thanks!

I'm working on a webapp that uses several cutting-edge WebKit features. It essentially does this: reads a local file with the FileReader, unzips each file into a string using a JavaScript unzip library, and POSTs each file using XMLHttpRequest. This works great for text files, but unfortunately it corrupts binary files (in this case, images). Firefox has a sendAsBinary method that solves this problem, but it is non-standard, and more to the point, it doesn't work on WebKit/Chrome which we depend on for other features.

There are a TON of workarounds, and so far none of them work for me:

• Mocking a file upload request with headers, boundaries, and so forth in a long string (like this).
• Setting a bunch of headers on the xhr object (as such)
• Using the BlobBuilder, appending the string to the builder, and using getBlob to get a blob to upload (as remended in the Chrome issue thread about this)

What I'm looking for, most of all, is a forward-patible solution. Thanks!

• javascript
• upload
• binary
• xmlhttprequest

2 Answers 2

I had the same problem.

This one worked for me:

XMLHttpRequest.prototype.sendAsBinary = function(datastr) {
    function byteValue(x) {
        return x.charCodeAt(0) & 0xff;
    }
    var ords = Array.prototype.map.call(datastr, byteValue);
    var ui8a = new Uint8Array(ords);
    this.send(ui8a.buffer);
}

check here: http://javascript0/wiki/Portable_sendAsBinary

You can encode it with base64 and decode it on the server.