Handling Image Change

Contents

  const handleFileChange = (e) => {
  
   setImages((prevImages)=>({ ...prevImages, [e.target.name]: e.target.files[0] }));
  
  };

e.target represents<input type=”text” name=”displayImage” >
e.target.name refers to ‘name’ in <input type=”file” name=”displayImage” />
e.target.files refers to Multiple Files Selected at once by user when clicked on <input type=”text”>
- e.target.files[0] for accessing 1st selected file, e.target.files[1] for accessing 2nd selected file, and so on..

// …prevImages // Keep the existing images

// [e.target.name]: e.target.files[0] // Update the specific image

The spread operator “…prevImages” copies the current state of “images”.
The line “[name]: file” adds the new image selected by user to the preImages Object

So It looks like:

{
   displayImage: "user-selected-image.jpg",

    // other previous images...
 }

SO it looks like

{

username: “John”,

// other properties…

}

The spread operator “…prevImages” copies the current state of “images”.

The line “[name]: file” adds or updates the property in the new object with the selected file.

…prevImages // Keep the existing images

[name]: file // Update the specific image

SpaceUpper