Multiple Images Upload React JS

I have some weird issue going on here , which works in mozilla firefor , but doesnt work with Google Chrome nor Brave Browser .

Basically I am trying to upload images and displaying uploaded images at bottom/

Problem is , If i upload a image and delete the selected image and try to reupload same image again , it doesnt upload nor display the image in the preview section.

Here’s my code so far :

const selectImages = (e) => {
    e.preventDefault();
    const files = [...e.target.files];
    // const files = e.target.files;
    console.log(files)
    let newImages = [...images, ...files];

    console.log('total images :' , newImages )
    if (newImages?.length > 5) {
      newImages = newImages.slice(0, 5);
    }

    const newImagePreviews = newImages.map((file, index) => {
      // const uniqueKey = Date.now() + index;
      return {
        id: index,
        name: file.name,
        url: URL.createObjectURL(file),
      };
    });

    setImages(newImages);
    setImagePreviews(newImagePreviews);
  };

 
  const deleteImage = (index) => {
    const updatedImages = [...images];
    const updatedPreviews = [...imagePreviews];
  
    updatedImages.splice(index, 1); 
    updatedPreviews.splice(index, 1); 
  
    // const updatedImages = images.filter((image) => image.id !== id);
    // const updatedPreviews = imagePreviews.filter((image) => image.id !== id);
    console.log('updatedImages : ',updatedImages)
    setImages(updatedImages);
    setImagePreviews(updatedPreviews);
  };
<input
                  type="file"
                  accept="image/*"
                  multiple
                  id="imageUpload"
                  style={{ display: 'none' }}
                  onChange={selectImages}
                />

                {errors.imagesMinimum && <p className="error-text">{t('SPOT.REQUIRED_IMAGES')}</p>}

                <div className="image-previews">
                  {imagePreviews.map((image, index) => {
                    return (
                      <div className="image" key={index}>
                        <img src={image.url} />
                        <p className="file-name">{image.name}</p>
                        <div className="delete">
                          <button
                            onClick={() => deleteImage(index)}
                          >{t('SPOT.DELETE')}</button>
                        </div>
                      </div>
                    )
                  })}
                </div>

i dont see any logs of selected files : console.log(files) when i try to reupload deleted image again ( aka reupload same image which was deleted earlier ).

Can anyone help me with this about what the situation is here !

This code works perfectly for mozilla firefox!

>Solution :

It seems like you are trying to upload images and display them at the bottom, but when you delete an image and try to reupload the same image, it doesn’t work in Chrome or Brave browsers.

The input element is not resetting its value when you delete an image, so when you try to select the same file again, it doesn’t trigger the onChange event.

So you can try adding an onClick event handler to your input element that clears its value before selecting a file. For example:

<input
  type="file"
  accept="image/*"
  multiple
  id="imageUpload"
  style={{ display: "none" }}
  onChange={selectImages}
  onClick={(e) => (e.target.value = "")}
/>

You can still add the onClick handler to your input element even if you hide it from users.
The onClick handler will be triggered when the user clicks on the button or label that is associated with the input element.