Imgur API Error, How to upload with XHR

Question

    var fd = new FormData();
    fd.append("image", file); // Append the file
    fd.append("key", API_KEY);
    // 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() {
        console.log(JSON.stringify(xhr.responseText));
        alert("Anything?");
        var img_url = JSON.parse(xhr.responseText).upload.links.original;
        console.log("Image url of the uploaded image" + img_url);

The above code is the code i used to upload the image file via phonegap. but then i guess the code is outdated and can;t work with latest imgur API. which is backed by OAuth. May i know how to fix it in order to upload the image?

Answer 1

You're right... the code is outdated so the way I fixed is to upload images anonymously with the following instructions:

1.- In the FormData you just have to append the image, so the key shouldn't be appended

2.- You have to send a header with your client id, which I assume you already have... I did it with the following code xhr.setRequestHeader('Authorization', 'Client-ID FOO'); According to the documentation it has to be after opening the XMLHttpRequest but before sending the request.

3.-When you try to get the link, you have to parse the JSON in order to read the information, the link comes in the data node with the name link so the parsing will be: var link = JSON.parse(xhr.responseText).data.link;

4.- You have to use the new stable API of OAuth 2.0 so the line where you upload the image should look like this: xhr.open("POST", "https://api.imgur.com/3/image.json");... as you can see, it just change the number, which is the version, instead of upload it uses image and it has to be https... For your information, this is the first suggested way to do it, the other suggested way, which also works, is as follows: xhr.open("POST", "https://api.imgur.com/3/upload.json");

For your code I also assume you used the Drag'n Drop's example so the function should look something like this:

function upload(file) {

    /* Is the file an image? */
    if (!file || !file.type.match(/image.*/)) return;

    /* It is! */
    document.body.className = "uploading";

    /* Lets build a FormData object*/
    var fd = new FormData(); 
    fd.append("image", file); // Append the file
    var xhr = new XMLHttpRequest(); // Create the XHR (Cross-Domain XHR FTW!!!) Thank you sooooo much imgur.com
    xhr.open("POST", "https://api.imgur.com/3/image.json"); // Boooom!
    xhr.onload = function() {
    // Big win!    
        var link = JSON.parse(xhr.responseText).data.link;
        document.querySelector("#link").href = link;
        document.querySelector("#link").innerHTML = link;



        document.body.className = "uploaded";
    }
    // Ok, I don't handle the errors. An exercice for the reader.
    xhr.setRequestHeader('Authorization', 'Client-ID FOO');
    /* And now, we send the formdata */
    xhr.send(fd);
}

I encourage you to take a look to the documentation, it's very friendly and helps you to make the function and stuff... As I said this is for anonymous upload, if you want to upload images with a user, you have to authenticate first with a user and password, use tokens, and refresh'em, I didn't do that, but it shouldn't be much complicated once you've understand how it works...

Hope it helps!!