Multiple Image Upload In ReactJS

import React from 'react'
import ImageUploading from 'react-images-uploading';

— Then create an onChange event and add a useState in the app.js file.

const [images, setImages] = useState([]);
const maxNumber = 69;//maximum image upload
const onChange = (imageList) => {
  setImages(imageList);
};

–And add the image upload code in the app.js file.

<div className="App">
     <ImageUploading
       multiple
       value={images}
       onChange={onChange}
       maxNumber={maxNumber}
       dataURLKey="data_url"
     >
       {({
         imageList,
         onImageUpload,
         onImageRemoveAll,
         onImageUpdate,
         onImageRemove,
         isDragging,
         dragProps,
       }) => (
         
         <div className="upload__image-wrapper">
           <button
             style={isDragging ? { color: 'red' } : undefined}
             onClick={onImageUpload}
             {...dragProps}
           >
             Upload Image 
           </button>
           &nbsp;
           <button onClick={onImageRemoveAll}>Remove all images</button>
           {imageList.map((image, index) => (
             <div key={index} className="image-item">
               <img src={image['data_url']} alt="" width="100" />
               <div className="image-item__btn-wrapper">
                 <button onClick={() => onImageUpdate(index)}>Update</button>
                 <button onClick={() => onImageRemove(index)}>Remove</button>
               </div>
             </div>
           ))}
         </div>
       )}
     </ImageUploading>
   </div>

• maxNumber :- maxNumber is used for upload maximum image
• imageList:- list of images to render
• onImageUpload:- this option is used for upload image
• multiple :-this option is used for uploading multiple images
• onImageRemoveAll:- this option is called when removing all images

–My app.js file looks like this

import React, { useState } from 'react'
import ImageUploading from 'react-images-uploading';

function App() {

  const [images, setImages] = useState([]);
  const maxNumber = 69;//maximum image upload
  const onChange = (imageList, addUpdateIndex) => {
    setImages(imageList);
  };

  return (
    <>
     <div className="App">
      <ImageUploading
        multiple //multiple image upload
        value={images}
        onChange={onChange}
        maxNumber={maxNumber}
        dataURLKey="data_url"
      >
        {({
          imageList,
          onImageUpload,
          onImageRemoveAll,
          onImageUpdate,
          onImageRemove,
          isDragging,
          dragProps,
        }) => (
          
          <div className="upload__image-wrapper">
            <button
              style={isDragging ? { color: 'red' } : undefined}
              onClick={onImageUpload}
              {...dragProps}
            >
              Upload Image 
            </button>
            &nbsp;
            <button onClick={onImageRemoveAll}>Remove all images</button>
            {imageList.map((image, index) => (
              <div key={index} className="image-item">
                <img src={image['data_url']} alt="" width="100" />
                <div className="image-item__btn-wrapper">
                  <button onClick={() => onImageUpdate(index)}>Update</button>
                  <button onClick={() => onImageRemove(index)}>Remove</button>
                </div>
              </div>
            ))}
          </div>
        )}
      </ImageUploading>
    </div>
    </>
  )
}
export default App

–Upload images:

–Update images:

–Remove images: