imgbb upload in React JS using imgbb-uploader plugin – Code Example

imgbb is an image upload website where you can host your images of size upto 32 mb. In this article we will learn how to upload images on imgbb using React Js. Here we are going to use imgbb-uploader package of nodejs.

Introduction

imgbb-uploader is a lightweight library of nodejs which uses imgbb api to upload images. First you will need to get the api from imgbb and then use it in the component provided by the library.

There are few options like changing file name, time to live, uploading base64 etc. With time to live, you can set the expiration time of the uploaded image. After this time the image will be deleted from imgbb server.

Creating React Project

Let’s first create the reactjs project, image-uploader and enter into it –

npx create-react-app image-uploader
cd image-uploader

Installing imgbb-uploader Library

Next we will install the imgbb-uploader library –

npm install imgbb-uploader

Getting API key

To upload an image on imgbb we will need an API key. For that first sign up on the website using either email/password or with any social profile like Google, Facebook, Twitter etc.

Once you are signed in, you will get the profile like this –

imgbb user profile

Now go to this link – https://api.imgbb.com/ and you will see Get API Key button there –

Get API Key page on imgbb

Click on this button and website will show you the API key. Keep this key safe somewhere on your computer.

Generated API key on imgbb

Note: The API key shown in the above screenshot will not work for you because for security reasons I will delete it. Create your own API key and use in the below provided code.

Completing Project

Since we have the API key, we don’t need anything else. Move to your project directory and open App.js file. Add this code to it –

import React from "react";
import { imgbbUploader } from "imgbb-uploader";

export default function App() {
  const [data, setData] = React.useState({})

  const uploadImage = () => {
    imgbbUploader({
      apiKey:"YOUR_IMGBB_API_KEY",
      imageUrl:"https://akashmittal.com/wp-content/uploads/2020/10/site-logo-small.png"
    })
      .then((response) => setData(response))
      .catch((error) => setData(error));
  }
  

  return (
    <div className="App">
      <h2>Uploading Image to imgbb</h2>
      <p>We will upload this image -</p>
      <p><img src="https://akashmittal.com/wp-content/uploads/2020/10/site-logo-small.png" /></p>
      <button onClick={uploadImage}>Click to Upload</button>
      <br /><br />
      <h4>Returned JSON</h4>
      <pre>{JSON.stringify(data, null, "\t")}</pre>
    </div>
  );
}

The output will look like this –

imgbb react project output with API response

The json returned by imgbb on uploading image is –

{
	"id": "TrJ3Gfj",
	"title": "site-logo-small",
	"url_viewer": "https://ibb.co/TrJ3Gfj",
	"url": "https://i.ibb.co/QXhwVgS/site-logo-small.png",
	"display_url": "https://i.ibb.co/QXhwVgS/site-logo-small.png",
	"width": "160",
	"height": "40",
	"size": 21572,
	"time": "1662375765",
	"expiration": "0",
	"image": {
		"filename": "site-logo-small.png",
		"name": "site-logo-small",
		"mime": "image/png",
		"extension": "png",
		"url": "https://i.ibb.co/QXhwVgS/site-logo-small.png"
	},
	"thumb": {
		"filename": "site-logo-small.png",
		"name": "site-logo-small",
		"mime": "image/png",
		"extension": "png",
		"url": "https://i.ibb.co/TrJ3Gfj/site-logo-small.png"
	},
	"delete_url": "https://ibb.co/TrJ3Gfj/4fca6b7d4c6d1c24de7dc1981af4650c"
}

Understanding Project Code

Let’s break down this code for better understanding.

1. Importing <imgbbUploader> Component

First we will need to import <imgbbUploader> component from imgbb-uploader library that we installed.

import React from "react";
import { imgbbUploader } from "imgbb-uploader";

export default function App() {
  return (<div></div>)
}

2. Creating state variable data to hold response from imgbb API

Next, we will need a state variable to hold the response from imgbb API. This response is useful as it contains all the necessary metadata of the uploaded image as well as the url to delete this image.

Let’s create this state variable and call it data

import React from "react";
import { imgbbUploader } from "imgbb-uploader";

export default function App() {
  const [data, setData] = React.useState({})

  return (<div></div>)
}

3. Creating uploadImage() function

In our code example, we are uploading an image on the click of button. This button click will call a function which has the complete uploading logic. That function is uploadImage() and we are going to check that now –

import React from "react";
import { imgbbUploader } from "imgbb-uploader";

export default function App() {
  const [data, setData] = React.useState({})

  const uploadImage = () => {
    imgbbUploader({
      apiKey:"YOUR_IMGBB_API_KEY",
      imageUrl:"https://akashmittal.com/wp-content/uploads/2020/10/site-logo-small.png"
    })
      .then((response) => setData(response))
      .catch((error) => setData(error));
  }
  

  return (
    <div></div>
  );
}

In this function we are calling imgbbUploader() function which accepts an object of options as parameter. This object has multiple properties like –

4. Html UI code

At last we will add some html code for displaying the button and imgbb response –

import React from "react";
import { imgbbUploader } from "imgbb-uploader";

export default function App() {
  const [data, setData] = React.useState({})

  const uploadImage = () => {
    imgbbUploader({
      apiKey:"YOUR_IMGBB_API_KEY",
      imageUrl:"https://akashmittal.com/wp-content/uploads/2020/10/site-logo-small.png"
    })
      .then((response) => setData(response))
      .catch((error) => setData(error));
  }
  

  return (
    <div className="App">
      <h2>Uploading Image to imgbb</h2>
      <p>We will upload this image -</p>
      <p><img src="https://akashmittal.com/wp-content/uploads/2020/10/site-logo-small.png" /></p>
      <button onClick={uploadImage}>Click to Upload</button>
      <br /><br />
      <h4>Returned JSON</h4>
      <pre>{JSON.stringify(data, null, "\t")}</pre>
    </div>
  );
}

Conclusion

In this article we created a small image uploading project in reactJS for imgbb image host. You can use this as it is in any of your large projects. If your image size is less than 32mb then imgbb could be a great option for you.

Live Demo

Open Live Demo