How to use imgur to host images in ReactsJS ?
Last Updated :
10 Nov, 2023
Imgur is primarily used as an image-sharing service, where users post content through an interface provided by the company, just like Facebook or Instagram. But we can also post images to Imgur by accessing their APIs. So, in this article, we will discuss how to upload images to Imgur in React without relying on any other third-party library like Axios.
Prerequisite:
Approach :
To use imgur to host images in React we will use the POST method in the fetch API to send and update data on imgur. We will get a image file input and send the input data to imgur using API to host images.
Steps to Create React Application:
Step 1: Create a new React application using the following command.
npx create-react-app react-imgur
Step 2: Now move into the project folder and start the React app.
cd react-imgurnpm
Project Structure:

Step 3: Now let's see how to register Imgur application. Visit https://imgur.com/register to create a new user account.


Step 4: After verifying your account, visit https://api.imgur.com/oauth2/addclient to register for a new application.


Step 5: Go the application submenu for managing the Client ID

Example: This example implements image hosting on imgur using POST request to the API.
JavaScript
// Filename - App.js
import { useState } from "react";
function App() {
const [file, setFile] = useState();
const onFileChange = (event) => {
// Updating the state
setFile({ file: event.target.files[0] });
};
const onFileUpload = async () => {
// Client ID
const clientId = "fd2e1e3d3d12ce1",
auth = "Client-ID " + clientId;
// Creating an object of formData
const formData = new FormData();
// Adding our image to formData
formData.append("file", file);
// Making the post request
await fetch("https://api.imgur.com/3/image/", {
// API Endpoint
method: "POST", // HTTP Method
body: formData, // Data to be sent
headers: {
// Setting header
Authorization: auth,
Accept: "application/json",
},
})
// Handling success
.then(
(res) =>
alert("image uploaded") &&
console.log(res)
)
.catch(
(err) => alert("Failed") && console.log(err)
);
};
return (
<>
<input
name="file"
type="file"
onChange={onFileChange}
/>
<button onClick={onFileUpload}>Upload</button>
</>
);
}
export default App;
Step to run the application: Open the terminal and type the following command.
npm start
Ŏutput: Run the application and navigate to http://localhost:3000/
Similar Reads
How to crop images in ReactJS ? Image cropping is a common requirement in web applications, especially when dealing with user-generated content, photo editing, or image manipulation. ReactJS, being a popular JavaScript library for building user interfaces, provides various techniques and libraries that can be used to implement ima
3 min read
How to Set Background Images in ReactJS Setting the background images in React improves the UI and user experience of web apps by making the appearance better. These images can be some shape or shade using color gradients. In this tutorial, we will look at different methods to apply background images to your react application. How to Set
4 min read
How to show user image along with input field in ReactJS? We can show the user image along with the input field in React JS. It is like adding an icon image inside the input field. This feature can also be seen on many website login screens. Material UI for React has this component available for us and it is very easy to integrate. We can use the InputAdor
3 min read
How to use Bootstrap Icons in React ? React is a free library for making websites look and feel cool. With React, your websites can be super interactive and lively. Itâs great for making modern websites where everything happens on one page. The best part is that you can build and reuse different parts of your webpage, making it easy to
2 min read
How to Upload Image and Preview it Using ReactJS? In React, uploading and previewing images improve the user experience of the application. It's typical for online apps to provide image upload capability that enables users to choose and upload photographs. We simply upload a photo from our local device to our React Project and preview it using a st
2 min read
How to import image in Next.js ? Next.js is a full-stack React-based framework. Unlike a traditional react app, which loads and renders the entire application on the client, Next.js allows the first-page load to be rendered by the server, which is great for SEO and performance. Some of the key features of Next.js are:Â Server-side
4 min read