Imgur API Error, How to upload with XHR

imgur, javascript, jquery, xmlhttprequest

Solution

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!!

Problem

``` 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?

Original source