Mark Michon
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:
- Set up a new application on Imgur.
- Connect the Imgur API to Bearer.
- 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. Then, Register your application. See our full, step by step guide, on 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 on the Bearer Dashboard. For more on setting up an integration, see the getting started guide.
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 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 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:
npm init --yes
Install the Bearer client for Node.js
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:
// 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, 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.
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.
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:
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:
Like this tutorial or have an idea for one you'd like to see? Connect with us @BearerSH
