Open In App

How to use imgur to host images in ReactsJS ?

Last Updated : 10 Nov, 2023
Like Article

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. 


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 to create a new user account. 

Step 4: After verifying your account, visit 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.


// Filename - App.js
import { useState } from "react";
function App() {
    const [file, setFile] = useState();
    const onFileChange = (event) => {
        // Updating the state
        setFile({ file:[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("", {
            // API Endpoint
            method: "POST", // HTTP Method
            body: formData, // Data to be sent
            headers: {
                // Setting header
                Authorization: auth,
                Accept: "application/json",
            // Handling success
                (res) =>
                    alert("image uploaded") &&
                (err) => alert("Failed") && console.log(err)
    return (
            <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/

Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads