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 –
Now go to this link – https://api.imgbb.com/ and you will see Get API Key button there –
Click on this button and website will show you the API key. Keep this key safe somewhere on your computer.
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 –
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 –
-
apiKey– Your imgbb api key -
imagePath– The path of local image that you want to upload. Use this property only when you are uploading a local image. -
name– Provide a name for your image. Otherwise it will automatically set to image name in path. -
expiration– Number of seconds after which image to be deleted. Acceptable range 60-15552000. -
imageUrl– Url of the remote image. Use this for remote image only. -
base64string– A base64 string of image file. Maximum size is 32mb.
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
