select multiple images using <input type=“file” />, update the state to store the image URLs, dynamically add <img /> tags to display them in reactjs

Question

this.state = {
  imageURL: []
};

fileSelectHandler = (event) => {
  this.setState({
    imageURL: [???]
  });
}

<input type="file" multiple onChange={fileSelectHandler} />
<img src={imageURL[0]} />

Here I need to dynamically add multiple img tags according to the number of images selected. Please help!

Answer 1

On File change you can try the sample code here

fileSelectHandler = (e) => {
    Array.from(e.target.files).forEach(file => {
      const reader = new FileReader();
      reader.onload = (e) => {
      this.setState({
        images: this.state.images.concat(e.target.result),
      });
    };
    reader.readAsDataURL(file);
  })
}

A demo is here https://codesandbox.io/s/qxxzz1q11j