how-to-host-images-on-imgur-using-ap-is-a-complete-guide

Introduction

Imgur is one of the best image hosting platforms on the internet. The best part is that it provides API functionality for hosting images or videos, which is the best part when we are searching for the best and most secure image hosting and storing platform on the internet.

How to use Imgur APIs

Step 1: Open your account on Imgur. Once you are done, You will require a few things to get started, and those are

1. Imgur client ID

2. Imgur client secrete

3. Imgur Refresh token

Step 2: Get Imgur client ID and client secrete.

To get client ID and client secrete, search Imgur OAuth 2. Enter the website, and now you will have to register to get a client ID and password.

Step 3: Register your application to get both a client ID and a secret. An example is given below.

On completing this process, you will get your client ID and client secret. Once you create your application, it will be available on the settings page of Imgur. Where you can check your client ID and secret.

The client ID will be the same for the application, but the secret key will generate only once. If you forget the key, you will have to regenerate it.

Step4 : Get Refresh token

To get a refresh token, you will have to follow a few steps.

1. Go to the following URL: Use your client_id.

 https://api.imgur.com/oauth2/authorize?client_id=YOUR_CLIENT_ID&amp;response_type=REQUESTED_RESPONSE_TYPE&amp;state=APPLICATION_STATE

2. Once you enter the site using this URL, you can see the refresh_token on the URL bar of the browser. Copy this refresh token for further use.

Before making API requests, you always need to get your access token. Let’s see how.

 async function getToken(req) {

    var axiosRes = ''

    const formdata = new FormData();

    formdata.append('refresh_token', “your refresh token”)

    formdata.append('client_id', “your client id”)

    formdata.append('client_secret', “your client secrete”)

    formdata.append('grant_type', 'refresh_token')

    await axios.post('https://api.imgur.com/oauth2/token', formdata)

        .then(res => {

            axiosRes = res.data

        }).catch(err => {

            axiosRes = err

        })

    return axiosRes;

}

By making this request, you will get an access token. Note that this access token will expire in a few hours, so setup your system as per your requirements.

Alright Now you have all the credentials that were initially important to making API requests. Let’s see how we can make an API request to host our images.

POST api request:

     const formdata = new FormData();

    formdata.append('image’ ,  “—your image file—’)

    formdata.append('type', 'file')

    axios.post('https://api.imgur.com/3/image', formdata, {

        headers: {

            Authorization: `Bearer ${“--access token—”}`

        }

    }).then(res => {

        // your code

    }).catch(err => {

        // your code

    })

Once you host your image file, it will be available on your account. The URL of this image can be used anywhere to share this file. In this way, you can upload or host images using Imgur. Explore more details about APIs at https://apidocs.imgur.com/.

This type of image hosting site is good for people who want to store their website images safely on the internet. Thanks for reading this article. If you like this, please subscribe to us to get the latest updates of awesome articles.

async function getToken(req) { var axiosRes = '' const formdata = new FormData(); formdata.append('refresh_token', “your refresh token”) formdata.append('client_id', “your client id”) formdata.append('client_secret', “your client secrete”) formdata.append('grant_type', 'refresh_token') await axios.post('https://api.imgur.com/oauth2/token', formdata) .then(res => { axiosRes = res.data }).catch(err => { axiosRes = err }) return axiosRes; }

const formdata = new FormData(); formdata.append('image’ , “—your image file—’) formdata.append('type', 'file') axios.post('https://api.imgur.com/3/image', formdata, { headers: { Authorization: `Bearer ${“--access token—”}` } }).then(res => { // your code }).catch(err => { // your code })