Reactjs input multiple files with preview not working on first selection

Question

So I'm trying to make a component to select multiple images and display a preview, so then the user can see the selected images and decide to upload it or not.

So here's my code to select images and display the preview :

  const [fileObj, setFileObj] = useState([]);

const loadImageHandler = (event) => {
    setImageUpload(event.target.files);
    setShowProgress(true);

    for (let i = 0; i < event.target.files.length; i++) {
      setFileObj((arr) => [
        ...arr,
        {
          file: event.target.files[i],
          url: URL.createObjectURL(event.target.files[i]),
        },
      ]);
    }
  };

return (
    <div className={classes.container}>
      <div className={classes.imgPreview}>
        {fileObj.length > 2 &&
          fileObj.map((obj, index) => <img id={index} src={obj.url} />)}
      </div>
      <div>
        <label id="articleImg">Select images for your article :</label>
        <input
          name="articleImg"
          type="file"
          onChange={loadImageHandler}
          accept="image/*"
          required={required}
          multiple
        />
      </div>
    </div>
  );

The problem is that when I select my images, the input field indicates that there are 3 images selected for example, but the preview does not display anything. It is when I select the images a second time that the preview shows the new images that have just been selected and the previous ones. How can I update my preview during the first selection?

RedYin · Accepted Answer · 2022-08-27 13:36:09Z

0

That because you are using setState method in the loop. So in next render, actually there is only one data in fileObj array. Because of 'fileObj.length > 2' condition, so the image won't be rendered.

Try change 'loadImageHandler' method to this way.

const loadImageHandler = (event) => {
    setImageUpload(event.target.files);
    setShowProgress(true);
    // First to figure out the result array by using map method
    const result = event.target.files.map(v => ({
       file: v,
       url: URL.createObjectURL(v),
    }));
    
    setFileObj((arr) => [...arr, ...result]);
 };

answered Aug 27, 2022 at 13:36

RedYin

1444 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Romano Over a year ago

As I said to Anthony, event.target.files is a FileList so we can't use Array's methods like map on it. So I just converted it to get an array like that : const arr = Array.from(event.target.files). Thank you for the explication of the setState in the loop !

SCHYNS Anthony · Accepted Answer · 2022-08-27 13:24:38Z

0

Ok so there is a problem in your function, this is not a good practice to set the state in a for loop, do it this way:

const loadImageHandler = (event) => {
    setImageUpload(event.target.files);
    setShowProgress(true);

    setFileObj(event.target.files.map(item => ({
        file: item,
        url: URL.createObjectURL(item)
    })))
  };

answered Aug 27, 2022 at 13:24

SCHYNS Anthony

3332 silver badges8 bronze badges

1 Comment

Romano Over a year ago

event.target.files is a FileList so we can't use Array's methods like map on it. So I just converted it to get an array like that : const arr = Array.from(event.target.files). Now it works perfectly thanks you !

Collectives™ on Stack Overflow

Reactjs input multiple files with preview not working on first selection

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related