In today’s digital landscape, the ability to upload images seamlessly is a fundamental feature of numerous web and mobile applications. Take a moment to think about applications that you interact with daily. Image uploads are a major cornerstone of social media applications and e-commerce apps like Amazon to enhance user engagement.

A thoughtful and intuitive UX design with an image upload feature should provide visual feedback and image previews before uploading. This helps the user verify that they are uploading the right image. Adding progress indicators and success messages keeps the user aware and engaged during the image upload process.

How do you upload images using React? Let’s dive deep into how to upload an image, preview it, and send it to a backend server.

Initialize a React application using the vite tool from the command terminal. We will use the yarn package manager to install and run the scripts. Finally, navigate to the project folder and run yarn to install the dependencies.

This component renders a simple user interface with a file input field that allows users to select image files. The 

 attribute is set to "image/*", which specifies that the file input should only accept files with MIME type starting with "image/", effectively limiting file selection to images.

When a user selects a file the handleFileChange function is triggered. The image selected by the user is stored in a state variable. The selected file from the file input is retrieved by 

The function below converts a file to a data URL string, encapsulated within a promise to handle the file and get the image preview.

Once a user selects an image, the preview of the image is rendered.

: Stores the selected image file by the user.

: Stores the data URL of the selected image f

 function is called with the selected file to convert it into a data URL string representing the image. Upon successful conversion, the obtained data URL is set as the value of 

 state variable, enabling the image preview.

Finally, the image uploaded from your local machine to the react app can be sent to a server. So we will now make a POST request to a REST API and pass the 

 as the payload. We need to install Axios and use it to make the API request.

a) Set up Axios for React TypeScript Client

After installing Axios we set up an Axios client configured with custom headers for sending 

he Axios instance can be used throughout the application to make HTTP requests with these headers preconfigured.

b) Method to handle image upload to a server

The handleImageUpload function is used to handle the API request. 

 object is created to store the image file selected by the user.

 option is provided in the request configuration to track the upload progress. Whenever progress is made, the 

 is used to calculate the percentage of completion, and the 

 state variable is updated accordingly using 

c) Pass the function to the form onSubmit handler

 function is called, which is responsible for sending the selected image file to the server.

Here is the complete code for the Image upload.

Develop your programming skills with tutorials in our blog. We cover a wide range of programming languages and technologies. Whether you are a beginner or an experienced developer, you will find something useful here.

Develop your programming skills with tutorials in our blog.

react Tutorials

Adding image upload feature to your React Application

Practice Frontend, Android and iOS by building real world projects.