Home Bootstrap 4.5 Reactjs Multiple Images Upload with Preview and Delete

Reactjs Multiple Images Upload with Preview and Delete

by therichpost
Published: Last Updated on 14 comments
Reactjs Multiple Images Upload with Preview and Delete

Hello to all, welcome back to my blog. Today in this blog post, I am going to tell you, Reactjs Multiple Images Upload with Preview and Delete.

React Multiple Image Upload

Post Code Benefits, this post code will provide below things:

  1. Multiple Image uploading.
  2. Uploaded image will preview in modal popup.
  3. Uploaded image can be delete.

For reactjs new comers, please check the below link:

Reactjs Basic Tutorials

Friends now I proceed onwards and here is the working code snippet for Reactjs Multiple Images Upload with Preview and Delete and please use this carefully to avoid the mistakes:

1. Firstly friends we need fresh reactjs setup and for that we need to run below commands into our terminal and also w should have latest node version installed on our system:

npx create-react-app reactimageupload

cd reactimageupload

npm start // run the project


2. Now we need to run below commands to get bootstrap(for good layout), antd(for datepicker and form) modules into our react js app:

npm install antd

npm install bootstrap --save

npm start


3. Now friends, after are done with commands, now please open reactimageupload/src/App.js file and add below code inside it:

import React from 'react';

import './App.css';

//Bootstrap and jQuery libraries
import 'bootstrap/dist/css/bootstrap.min.css';

//Image upload modules
import { Upload, Modal } from 'antd';
import { PlusOutlined } from '@ant-design/icons';

import "antd/dist/antd.css";

class App extends React.Component {


    //Uploaded url
    function getBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);

    class PicturesWall extends React.Component {
      state = {
        previewVisible: false,
        previewImage: '',
        previewTitle: '',
        fileList: [
            uid: '-1',
            name: 'image.png',
            status: 'done',
            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      handleCancel = () => this.setState({ previewVisible: false });

      //Image Preview
      handlePreview = async file => {
        if (!file.url && !file.preview) {
          file.preview = await getBase64(file.originFileObj);
          previewImage: file.url || file.preview,
          previewVisible: true,
          previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
      handleChange = ({ fileList }) => this.setState({ fileList });
      render() {
        const { previewVisible, previewImage, fileList, previewTitle } = this.state;
        const uploadButton = (
            <PlusOutlined />
            <div style={{ marginTop: 8 }}>Upload</div>
        return (
              {fileList.length >= 8 ? null : uploadButton}
              <img alt="example" style={{ width: '100%' }} src={previewImage} />

    return (
    <div className="MainDiv">
      <div className="jumbotron text-center">
      <div className="container">
          <PicturesWall />

export default App;


Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding and live working must watch video above.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will good or bad.



You may also like


Naveen December 30, 2020 - 10:59 am

Hi, It was a great tutorial. I want to upload PDF as well including image.How can I upload Image and PDF using above code.Please help on this.It will be really very helpful for me.

Ajay Malhotra December 30, 2020 - 11:00 am

Thanks and I will update you on this.

Naveen December 31, 2020 - 10:13 am

Could you please help me on this. I was stuck here.Also I am new to React.

Ajay Malhotra December 31, 2020 - 10:15 am

You want to upload PDF file only? Tell me your query completely.

Nandy January 5, 2021 - 6:12 pm

Can u please share your code with functional component

Ajay Malhotra January 6, 2021 - 4:17 am

Okay sure.

Ľubomíra Števuliaková January 8, 2021 - 5:32 pm

amazing how i can write it in the latest react?

Ajay Malhotra January 9, 2021 - 4:07 am

This is already in latest react.

Ľubomíra Števuliaková January 10, 2021 - 12:32 pm

Im using arrow function instead classes but I rewrite it and its working great. Thanks

Ajay Malhotra January 10, 2021 - 3:36 pm

Great 🙂

hoannv July 1, 2021 - 5:17 pm

Can upload multiple image ..? please example how upload to server? thank bro.

sumit July 7, 2021 - 5:03 am

Can you please share Code? I want to implement this using pdf and images.

Ajay Malhotra July 7, 2021 - 5:09 am

I will share today, thanks.


Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.