How to use the Free Image Upload API – imgur.com

Using the API provided by imgur.com, you can create a function that allows you to attach images to your blog or website for free.

Sign Up

If you have not registered as a member, please proceed with the membership registration first on the following site.

Imgur: The magic of the Internet

Select the Sign up button in the upper right corner.

You can easily sign up with other social accounts as well. I will sign up with my Google account.

Enter your username and mobile phone number and press the Continue button.

Enter the 7-digit number sent to your mobile phone and press the Register button.

The registration is completed immediately and you will be moved to the following screen.

Application registration

After the membership registration is complete, the next step is to go through the application registration process to upload images to the service you want.

Select the API shown at the bottom of the main imgur.com site.

You will then see the Imgur API documentation like this:

If you scroll down a bit, you will see a link to Register your application, let's select it.

If you want to go directly, just click on the following link.

Imgur – Register an Application

On the next screen, we will fill in the required fields. Enter the appropriate application name and the URL of the site you operate in the Authorization callback URL. It seems that you can enter a different address, but I'm not sure why. You will also enter your email address. And click the submit button.

If you entered normally, you can get the Client ID and Client secret values ​​as follows. The value we need is the Client ID. Be sure to write down the Client secret value as well as you may need it later. Even if you forget, you can create a new one and use it later if necessary.

How to upload files

This can be easily verified with the following example. Enter the Client ID value obtained while registering the application in the xxxxxxxxxx part.

<input type="file" id="upload_image">
<button onclick="uploadImageTest()">upload</button>
<script>
    function uploadImageTest() {
        var bodyData = new FormData();
        var imageFile = document.querySelector("#upload_image").files[0];
        bodyData.append("image", imageFile);
        fetch("https://api.imgur.com/3/image", {
            method: "POST",
            headers: {
                Authorization: "Client-ID xxxxxxxxxxxxxxx",
                Accept: "application/json",
            },
            body: bodyData,
        }).then(function(res){
            return res.json();
        }).then(function(json){
            console.log(json);
        });
    }
</script>

If the image upload is successful, the following information is returned. Therefore, it is possible to judge success by the success value and show the actual image through the link part of the data.

{
  "data": {
    "id": "orunSTu",
    "title": null,
    "description": null,
    "datetime": 1495556889,
    "type": "image/gif",
    "animated": false,
    "width": 1,
    "height": 1,
    "size": 42,
    "views": 0,
    "bandwidth": 0,
    "vote": null,
    "favorite": false,
    "nsfw": null,
    "section": null,
    "account_url": null,
    "account_id": 0,
    "is_ad": false,
    "in_most_viral": false,
    "tags": [],
    "ad_type": 0,
    "ad_url": "",
    "in_gallery": false,
    "deletehash": "x70po4w7BVvSUzZ",
    "name": "",
    "link": "http://i.imgur.com/orunSTu.gif"
  },
  "success": true,
  "status": 200
}

Hope you find it useful.