Cross-Domain XHR uploading via Javascript

Question

Possible Duplicate:
Parsing xml/json response in IE9

I want to implement a Javascript uploader using Imgur API (I think that's the one Stackoverflow uses). However, I haven't been able to make it work. I tried Ajax Upload but I got "Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers". Strangely enough, I used this plugin and I didn't get that error. Instead, I got an XML response saying <message>No image data was sent to the upload api</message> (which, I think, was due to the fact that I couldn't send the file object as a parameter called 'image'), as described in the documentation:

image | required | POST | A binary file, base64 data, or a URL

So, my general question is: What is the easiest way to upload to Imgur (considering that they allow Cross-Domain XHR, which is a big advantage) in a cross-browser (IE8+, Chrome, Firefox and friends) way?.

I also read a bit about HTML5's FormData object, but it seems that even now, cross browser support is not great and I'm not sure if there are javascript implementations for IE8+, Safari, etc.

UPDATE: I managed to get this (almost) working using Jquery Form Plugin, but I still have this problem (related to IE9). Maybe that's relevant to solve this question, which in turn, would solve the other one.

UPDATE2: For future reference, Jquery Form Plugin works fine. However, there is a problem parsing an XML response which contains all the data relevant from Imgur. Please refer to Parsing xml/json response in IE9 to further information about this issue. In short: JSON is not an option, XML should work but it doesn't. You can try server side scripting instead, sending the request via AJAX to a server-side script and letting your script send the upload and receiving the response correctly. In order not to diverge attention from the real issue, I will close this question.

---

Any help would be greatly appreciated.

Answer 1

There's a fully working example for JavaScript in the Imgur API documentation.

function upload(file) {
   // file is from a <input> tag or from Drag'n Drop
   // Is the file an image?
   if (!file || !file.type.match(/image.*/)) return;

   // It is!
   // Let's build a FormData object
   var fd = new FormData();
   fd.append("image", file); // Append the file
   fd.append("key", "API_KEY"); // Get your own key: http://api.imgur.com/

   // Create the XHR (Cross-Domain XHR FTW!!!)
   var xhr = new XMLHttpRequest();
   xhr.open("POST", "http://api.imgur.com/2/upload.json"); // Boooom!
   xhr.onload = function() {
      // Big win!
      // The URL of the image is:
      JSON.parse(xhr.responseText).upload.links.imgur_page;
   }

   // Ok, I don't handle the errors. An exercice for the reader.
   // And now, we send the formdata
   xhr.send(fd);
}