Can Webkit JavaScript PUT or POST create a REST-style image as a pure binary?

Question

When my browser downloads an image from a website, there is no base64 encoding. It issues an HTTP command, such as GET /image.jpg , and receives an HTTP response whose Content-Type is something like image/jpg , whose Content-Length is the number of bytes in the image and whose body is the data of the binary image itself . Data is not encoded using a character set or encoded using a scheme such as base64.

Writing RESTful resources taught me to expect symmetry between an HTTP GET and a PUT so that, for example, a URL that supplies JSON data when I do a GET will receive JSON data when it is represented by a PUT . In both cases, form coding is not involved; in both cases there is simply a Content-Length , which indicates the number of bytes in the payload, a Content-Type header declaring that the payload is JSON in a certain character set, and then the character data is separate and without any restrictions in quality GET or PUT bodies.

I am writing a PhoneGap application that allows users to take photos and upload them using my application. I expected that I could create a RESTful interface for this that supports symmetric GET and PUT - so that the PUT commands do not contain special encoding and do not imply any representation of the character set, but simply have Content-Type of image/jpg and then a lot JPG binary data as their payload. Obviously, this is a more efficient use of bandwidth than trying to encode an image inside a form. And this approach works fine when I PUT match the url with a tool like curl .

But I was not lucky to make a clean RESTful PUT from PhoneGap WebKit JavaScript! PhoneGap wants to return the image to my JavaScript as the local file: URL, as well as the data: URL, which contains the image data in strict accordance with base64 encoding. But in no case can I find a clear way to convert the image to pure binary format (could I use one of these new-fangled Blob objects for this? If so, how?), And then call PUT , which without decorating the request with additional form layers or cruft-coding, will simply transfer the raw image over the wire to my web server as an HTTP request payload.

Does anyone know how to induce WebKit to a PUT AJAX request with a raw image as its body? Thanks for any pointers - or even any useful answers that I am approaching this, everything is wrong!

Answer 1

As for binary image processing, the Inspector binary demo may be useful as an example of the end.

There is information on how to get Blob from the MDN file system. This blog post describes how to turn base64 URIs into ArrayBuffer and then Blob .

Finally, either ArrayBuffer or Blob can be loaded using the XMLHttpRequest2 interface .

The XHR2 specification seems to imply that PUT supported, as well as many other HTTP methods. Therefore, combining all this, you can store files in Blob and send them using XHR2.

---

Unexplored code sample using base64 decoding method with some help of base64-binary.js :

 var BASE_64_PREFIX = "base64,"; function getBase64Content(base64Uri) { var index = base64Uri.indexOf(BASE_64_PREFIX); return base64Uri.substring(index + BASE_64_PREFIX.length); } function put(uri, data, onComplete) { var xhr = new XMLHttpRequest(); xhr.open("PUT", uri, true); xhr.onload = onComplete; xhr.send(data); } var base64Uri = fromPhoneGap(); var base64Content = getBase64Content(base64Uri); var arrayBuffer = Base64Binary.decodeArrayBuffer(base64Content); put("/some/uri", arrayBuffer, function () { console.log("All done"); }); 

---

Nevertheless, I doubt that much of this works even on the last WebKit desktop, and even more so on the version that you are going to saddle through PhoneGap. You are probably not in good shape to take advantage of these draft specifications.