0

I have been working on a project, that displays all the images which have been added by the user in the input field of the type "file". I referred to the stackoverflow ans as shown here, which shows the first uploaded image. Taking inspiration from the given method, I used a custom method to show added files, as shown below.

I have been using react js to list all such files which have been uploaded. The code, that I wrote is as shown:


  const [images, setImages] = useState([]);
  function ImageUpload (e) {
    if (e.target.files && e.target.files[0]) {
      for (let i = 0; i < e.target.files.length; i++) {
        let reader = new FileReader();
        reader.onload = e => {
          let updated_ar = images
          images.push(e.target.files[i])
          setImages(images)
        }
        reader.readAsDataURL(e.target.files[i])
      }
    }
  }

I have been unable to grasp the exact error in this code. the above function ImageUpload is called, when the images are uploaded in the input type file, as shown below:


          <input
            type="file"
            onChange={ImageUpload}
            className="fileUpload"
            id="group_image"
            accept="image/x-png, image/gif, image/jpeg"
          />

Looking for the best solution to the above problem.

Phoenix
  • 149
  • 11

0 Answers0