Fun with APIs: Search for and upload images with the imgur API
Published: 2019-12-12 17:46:18

Imgur is a great platform for browsing and sharing images. In addition to searching for images, it can be useful for your application to use their API to upload images to Imgur.

In this tutorial you will learn to:

1. Set up a new application on Imgur.
2. Connect the Imgur API to Bearer.
3. Use the Bearer client to interact with Imgur's API.

Let's get started!

## Set up a new application on Imgur

You'll need an Imgur account, so if you haven't already [create one on Imgur](https://imgur.com/register). Then, [Register your application](https://api.imgur.com/oauth2/addclient). See our full, step by step guide, on [How to configure the Imgur API](https://bearer.sh/integrations/68/imgur-api/articles/how-to-configure-the-imgur-api) for more details.

> Make sure to save your Client ID and Client Secret.

## Configure the Imgur integration on Bearer

Next, activate and configure the [Imgur integration](https://app.bearer.sh/apis?newModal=true&api=68) on the Bearer Dashboard. For more on setting up an integration, see [the getting started guide](https://docs.bearer.sh/getting-started).

Once the integration is enabled, you can access it in your app using one of Bearer's clients. For this tutorial, we'll use the [@bearer/node](https://github.com/Bearer/bearer-js/tree/master/packages/node) client.

We will only be using your Imgur account to interact with the API. That means you will use your own Auth ID. In case you want to create events for third-party users, make sure to [generate an identity for them](https://docs.bearer.sh/faq/connect-button) to retrieve their Auth ID. Make sure to "Generate a new identity" and save your Auth ID before moving on to the next step.

## Connect to the Imgur API

Get started by initializing a new node application:

```bash
npm init --yes
```

Install the Bearer client for Node.js

```bash
npm install @bearer/node
```

With the integration enabled in your app, you can now use it to make API calls to Imgur.

Create a new file `index.js`, require the Bearer client, and initialize the integration:

```javascript
// npm install @bearer/node
const bearer = require("@bearer/node")

// Initialize the client
const client = bearer("YOUR-SECRET-KEY")

// Set up the Eventbrite Integration
const imgur = client.integration("imgur").auth('YOUR-AUTH-ID)

```

Make sure to replace `YOUR-SECRET-KEY` and `YOUR-AUTH-ID` with the correct values from Bearer. If you've set up Bearer before, this will be familiar. The secret key comes from your [Bearer settings page](https://app.bearer.sh/settings), and the auth ID comes from the identity generated when you set up Imgur within Bearer.

We can test the integration by searching for an image.

```javascript
imgur
  .get("/gallery/search", {
    query: {
      q: "Bears"
    }
  })
  .then(({ data }) => {
    console.log(data)
  })
  .catch(console.error)
```

When you run `node index.js` or start your application, you should receive an array of images matching your search term, `q: 'Bears'`. With everything working, let's move on to uploading an image to Imgur.

## Upload and create a new image

The Imgur API gives you three options for uploading a new image. You can pass the image as a Base64 encoded string, a url, or a binary file. To keep this tutorial focused on the API itself, we will pass in a url to an image.

```javascript
imgur
  .post("/upload", {
    body: {
      image:
        "https://images.unsplash.com/photo-1530595467537-0b5996c41f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3450&q=80",
      type: "url",
      title: "An Example Bear",
      description: "Bearer testing with bears."
    }
  })
  .then(({ data }) => {
    console.log(data)
  })
  .catch(console.error)
```

Here, we've passed in the url of an image as the `image` value, the type of our image (either url, base64, or file) as the `type` value, and a `title` and `description`. If we wanted this image added to a specific album, we could also pass an albumhash to the `album` key.

Run the application once again, `node index.js`, and you'll receive confirmation that the image was uploaded.

We can confirm this by calling the API to check the images in our account:

```javascript
imgur
  .get("/account/me/images")
  .then(({ data }) => {
    console.log(data)
  })
  .catch(console.error)
```

The newly added image should be the first image in the response.

## Wrapping up

Using the Imgur API to interact with the platform is a great way to bring the power of Imgur and it's community to your application. Some other fun things you can do include:

- [View images in a specific subreddit](https://apidocs.imgur.com/?version=latest#98f68034-15a0-4044-a9ac-5ff3dc75c6b0)
- [Favorite Images](https://apidocs.imgur.com/?version=latest#5dd1c471-a806-43cb-9067-f5e4fc8f28bd)
- [Comment on an image](https://apidocs.imgur.com/?version=latest#01dce1de-f332-4a14-88fa-25f97cc13613)

_Like this tutorial or have an idea for one you'd like to see? Connect with us [@BearerSH](https://twitter.com/BearerSH)_