• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar
  • Skip to secondary sidebar

CodingStatus

- Level Up Your Status with Coding Expertise!

  • Tutorials
    • React Js Tutorials
    • JavaScript Tutorials
    • PHP Tutorials
    • HTML Tutorials
    • SQL Tutorials
    • Laravel Tutorials
  • Snippets
    • React Js Code Snippets
    • Ajax Code Snippets
    • Node.js Code Snippets
    • JavaScript Code Snippets
    • jQuery Code Snippets
    • SQL Code Snippets
  • Programs
    • PHP Program
    • Python Programs
    • Java Programs
  • How To
    • React Js How To
    • Node Js How To
    • Ajax How To
    • PHP How To
    • jQuery How To
    • JavaScript How to
  • Scripts
    • PHP Script
    • Js Script
    • React Js Script
    • JQuery Script
  • Projects
    • PHP Project
  • Interview Questions
  • Guide
  • API Integration
  • Installation

Preview Multiple Images Before Uploading in React Js

January 7, 2022 By Md Nurullah

Hello Developers, In this tutorial, You will lean to preview multiple images before uploading in react js with some simple steps that are very simple to understand.

As you know that If you upload one or more images by selecting from the locale directory of your computer, then you can see only total number of files beside the file input Field.

Suppose, You have selected 5 images from your locale computer then you will see “5 files” at the right of browse Input filed.

After that with total number of files , It will be convinient to reconise the selected images before uploading. But If you provide the multiple image preview feature then you can easily understand which images are selected to upload in the server.

react preview multiple images before uploading

Table of Contents

  • Multiple Images Preview Before upload using React Js
    • 1. Create  Preview Multiple Images Component
    • 2. Create Images Gallery Component
    • 3.  Render Preview Multiple Images Component
    • 4. Test Preview Multiple Images Yourself

Multiple Images Preview Before upload using React Js

In this tutorial, I have created multiple images preview before the upload using functional component. Once, you learn it, you can easily create it yourself using the class component.

Learn Also –

Create  React Charts in React Js

Create a Simple React Todo App

Portfolio Gallery with Filtering in React Js

Create React Weather App

Before getting started, you have to create react app with npm and create the following folders & files within its default folder structure

reactapp/
  |__public/
  |    |__images/
  |__src/
  |   |
  |  preview-multiple-images-before-upload/
  |       |__PreviewMultipleImages.js
  |       |__ImagesGallery.js
 

I have used bootstrap 4 to create a responsive weather app. So, You should run the following command

npm install bootstrap

Also, you have to import it into the App.js

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

For more information, you can learn How to use Bootstrap in React Js

1. Create  Preview Multiple Images Component

File Name – PreviewMultipleImages.js

import { useState } from "react";
import ImagesGallery from "./ImagesGallery";

function PreviewMultipleImages(){

   const [images, setImages] = useState([]);

   const handleMultipleImages =(evnt)=>{
      const selectedFIles =[];
      const targetFiles =evnt.target.files;
      const targetFilesObject= [...targetFiles]
      targetFilesObject.map((file)=>{
         return selectedFIles.push(URL.createObjectURL(file))
      })
      setImages(selectedFIles);
    }
    
return(
    <>
    <div className="form-group my-3 mx-3">
    <input type="file" onChange={handleMultipleImages} multiple/>
    </div>
      <ImagesGallery images={images} />
   </>
)
}
export default PreviewMultipleImages

2. Create Images Gallery Component

File Name – ImageGallery.js

function ImagesGallery({images}){
    return(
        <div className="row">
        {
        images.map((url)=>{
            return (
                <div className="col-sm-1">
                <div className="card">
                <img src={url} />
                </div>
                </div>
            )
        })
        }
        
        </div>
    )
}

export default ImagesGallery;

 

3.  Render Preview Multiple Images Component

File Name – App.js

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import PreviewMultipleImages from "./preview-multiple-images-before-upload/PreviewMultipleImages";

function App() {
  return (
  <PreviewMultipleImages />
  );
}

export default App;

4. Test Preview Multiple Images Yourself

Now, you can test the portfolio gallery yourself  by running the React App with the following command

npm start

After that, you can see the portfolio gallery by opening the following URL in your web browser

http://localhost:3000/

Filed Under: React Js Code Snippets

Hello Developer, Welcome to my Blog. I'm Md Nurullah, a software engineer with 5+ years in full-stack web development. As the founder of CodingStatus.com, I'm passionate about sharing coding knowledge and collaborating for a brighter future. Let's connect and code together!

Primary Sidebar

Secondary Sidebar

React Js Code Snippets,
  • How to create reusable input field in react Js
  • How to Create Reusable Select Field in React Js
  • How to Create Reusable Textarea Field in React Js
  • Dynamic Multi-Step Form in React Js
  • Form with Multiple Components in React Js
  • Password and Confirm Password Validation in React Js
  • Add/remove Multiple Input Fileds dynamically in React Js
  • Show and Hide Password using React Js
  • Add/Remove Input Fields Dynamically with React Js
  • Add and Delete Table Rows Dynamically using React Js
  • Create dynamic table from JSON in React js
  • Preview Multiple Images Before Uploading in React Js
  • Increment Decrement Counter in React hooks
  • Create Charts in React Js
  • Home
  • About Us
  • Privacy Policy
  • Disclaimer
  • Terms & Conditions
  • Sitemap
  • Contact Us

Copyright © 2023 CodingStatus - All Rights Reserved