onErase method doesn't clean array

[salientknight]

When I click the X in the corner to remove an image the array then contains empty array elements and often keeps old files in the array.

I add an image and delete it (repeat) what I expect is to have an empty array. What I have instead is an 4 element array with two pictures and two empty elements.

I assume that I need to keep track of the pictures array myself, so normally I would filter the array based on the image name, but onDrop is passed is an empty array, so there is nothing to work with to clean up the array.

I plan on having more than one picture upload on the page, so I need to keep the array clean for processing and keep the indexes in tact so that images do not lose attachment to their instance. They each need to be collected separately because I need to add alt, caption, keywords etc...

This is what is passed to onDrop when you click the X

This is what the array looks like after + - +- of images

[lucianobagattin]

+1

[abdulghanitech]

yes, even I'm facing the same issue. The state is not getting updated correctly when we remove images.

[Berihugebre]

@salientknight I have the same issue. Did you find any solutions? appreciate your help

[unigazer]

If you are using the spread operator to add the object to the current state, don't use it. Instead of using the spread operator, just update the state like this:

const handleDrop = (picture, pictureDataURLs) => {
  setPictures(picture); // or pictureDataURLs
};

The onChange prop from the component already returns the correct number of objects in the callback, so you can just update the state without needing to include the "previous state". The component is an <input type="file" multiple /> HTML node, so it always returns the correct value(s), on every change.

[jysatuo]

If you are using the spread operator to add the object to the current state, don't use it. Instead of using the spread operator, just update the state like this:

const handleDrop = (picture, pictureDataURLs) => {
  setPictures(picture); // or pictureDataURLs
};

The onChange prop from the component already returns the correct number of objects in the callback, so you can just update the state without needing to include the "previous state". The component is an <input type="file" multiple /> HTML node, so it always returns the correct value(s), on every change.

You are right，very appreciate it