How to Upload Image and Preview it Using ReactJS? Last Updated : 18 May, 2025 Comments Improve Suggest changes Like Article Like Report 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 static method URL. PrerequisiteNPM & Node.jsReact JSReact-HooksReact UseStateApproach for the Image Upload and Preview it To upload an image and preview it using React JS we will use the HTML file input for the image input. After taking input the image URL is created using the URL.createObjectURL() method and stored in the state variable named file. Display the image as a preview using the HTML img tags with the file URL in the src prop.Steps to Create a React Application Step 1: Initialize a React App using this command in the terminal.npm create vite@latest projectStep 2: After creating your project directory(i.e. project), move to it by using the following command.cd projectProject Structure:Project StructureExample: This example implements upload and preview image using the createObjectURL method and HTML file input and img tag. JavaScript //App.js import React, { useState } from "react"; function App() { const [file, setFile] = useState(); function handleChange(e) { console.log(e.target.files); setFile(URL.createObjectURL(e.target.files[0])); } return ( <div className="App"> <h2>Add Image:</h2> <input type="file" onChange={handleChange} /> {file && <img src={file} alt="Uploaded preview" />} </div> ); } export default App; Step to Run Application: Run the application using the following command from the root directory of the project.npm startOutput: This output will be visible on the http://localhost:3000/ on the browser window.In this code:Imports React and useState: Imports React and useState for state management in the component.State for File: Creates a state variable file to store the URL of the uploaded image.handleChange Function: When a file is selected, it updates the file state with the image's URL using URL.createObjectURL().File Input: Renders an input field for the user to select an image file.Conditional Image Display: Only shows the image preview if a file is selected (i.e., file is not empty).Benefits of the Image Upload and Preview ItEnhances user experience by providing an image preview immediately after upload.Offers real-time feedback to users for image verification.Simplifies image handling in React applications using state and URL object.Easily integrates into various applications like social media or e-commerce.Provides a simple and minimal code solution for image upload and preview. Comment More infoAdvertise with us Next Article How to Upload Image and Preview it Using ReactJS? aniluom Follow Improve Article Tags : Web Technologies ReactJS Geeks Premier League Geeks-Premier-League-2022 React-Questions Similar Reads How to zoom-in and zoom-out image using ReactJS? React is a JavaScript library for building user interfaces. React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. In ReactJS whatever we write that look 2 min read Preview an image before uploading using jQuery Previewing an image before uploading using jQuery allows users to see the selected image on the webpage before submitting it to the server. This enhances user experience by providing immediate visual feedback, ensuring the correct image is chosen. There are several methods to preview an image before 3 min read How to display a PDF as an image in React app using URL? If we use the fetch method then it will open a new window for displaying the PDF file and let users download the PDF. But if you don't want that then there is a way to do so. You can use the package called react-pdf, by using this package you can render the PDF in your React app by using the PDF URL 3 min read How to upload an image using HTML and JavaScript in firebase ? Firebase is a product of Google which helps developers to build, manage, and grow their apps easily. It helps developers to build their apps faster and in a more secure way. No programming is required on the firebase side which makes it easy to use its features more efficiently. It provides cloud st 3 min read How to use imgur to host images in ReactsJS ? 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 witho 2 min read Create an Image Crop Tool using React-Native In this tutorial, we are going to build an Image crop tool using React-Native. The Image Crop tool is a very important tool for cropping the Images. It will allow the users to pick an image from storage, crop it, and later save it locally.Preview Image:Prerequisites Introduction to React NativeReact 4 min read How to upload files in firebase storage using ReactJS ? Firebase Storage is a powerful cloud storage solution provided by Google's Firebase platform. It allows developers to store and retrieve user-generated content, such as images, videos, and other files, in a secure and scalable manner. In this article, we will explore how to upload files to Firebase 2 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 Upload Image to MongoDB using Only NextJS 13.4? Next.js is a React framework that enables functionality such as server-side rendering and generating static websites. MongoDB is a NoSQL database that stores data in flexible, JSON-like documents. Combining Next.js with MongoDB allows you to build full-stack applications where the backend interacts 7 min read How to Upload Single/Multiple Image to Cloudinary using Node.js ? Uploading images to Cloudinary from a Node.js application is a common task when you need to manage and store images in the cloud. Cloudinary is a cloud-based service that provides comprehensive solutions for image and video management, including upload, storage, manipulation, and delivery.Approachto 4 min read Like