(React) How to preview input images before uploding in react?

Question

enter image description here I have these five input fields and below are their previews BUT only the last upload image is being displayed I want to display all five images

` this is what my current code looks like

 const [preview, setFilepre] = useState();
  function fileSelectedHandler(e) {
    let file = e.target.files[0];
    console.log(e.target.name);
    setFilepre(URL.createObjectURL(e.target.files[0]));
    setMemberData({
      ...memberData,
      [e.target.name]: {
        data: e.target.files[0],
        contentType: e.target.files[0].type,
      },
    });
  }

`

CContainer className="form-image-cont " >
              <CFormText>Images</CFormText>
        <img src={preview} className="image-input"/>
        <img src={preview} className="image-input"/>
        <img src={preview} className="image-input"/>
        <img src={preview} className="image-input"/>
        <img src={preview} className="image-input"/>
        </CContainer>

Amirhossein · Accepted Answer · 2022-11-22T09:27:21.160

You're using just one state for all of your images. So always the next image you upload, replaces with the previous one.

In order to fix the problem, you should use an array as your state and pass the index of the image you're uploading to the function like this:

const [previewImages, setPreviewImages] = useState(Array(5).fill(null));
function fileSelectedHandler(e, index) {
  let file = e.target.files[0];
  const newPreviewImages = [...previewImages];
  const imageSrc = URL.createObjectURL(e.target.files[0]);
  /* insert image at the index of the array */
  newPreviewImages.splice(index, 0, imageSrc);
  setPreviewImages(newPreviewImages);
  setMemberData({
    ...memberData,
    [e.target.name]: {
      data: e.target.files[0],
      contentType: e.target.files[0].type,
    },
  });
}

CContainer className="form-image-cont " >
  <CFormText>Images</CFormText>
  {previewImages.map((previewImage) => previewImage ? <img src={previewImage} className="image-input"/> : null)}
</CContainer>

Read more about splice.

Update:

You can replace the existing preview image by checking if the index of the preview image is null or not in the array and then decide to replace it or add it like this:

function fileSelectedHandler(e, index) {
  let file = e.target.files[0];
  const newPreviewImages = [...previewImages];
  const imageSrc = URL.createObjectURL(e.target.files[0]);
  if(newPreviewImages[index] === null) {
    /* insert image at the index of the array */
    newPreviewImages.splice(index, 0, imageSrc);
  } else {
    /* replace the previous image at index */
    newPreviewImages[index] = imageSrc;
  }
  setPreviewImages(newPreviewImages);
  setMemberData({
    ...memberData,
    [e.target.name]: {
      data: e.target.files[0],
      contentType: e.target.files[0].type,
    },
  });
}

adding more to it:- can we change the existing preview image with change in choose image — Student mern, Nov 22 '22 at 08:49

Charles Kasasira · Answer 2 · 2022-11-22T08:07:11.860

-1

You are setting the preview to just one image, that's why it is repeated 5 times, make sure that the preview is either an array that you can map through or an object of the different images you would like to preview

this sets the preview to one image, the first one

setFilepre(URL.createObjectURL(e.target.files[0]));

edited Nov 22 '22 at 08:07

answered Nov 22 '22 at 07:46

Charles Kasasira

240
1
5
15

Your solution is wrong because URL.createObjectURL is only callable with 1 single object not an array! Read more here: https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL – Amirhossein Nov 22 '22 at 07:56

(React) How to preview input images before uploding in react?

2 Answers2