JakeHartnell / react-images-upload

React input file component with images preview
https://jakehartnell.github.io/react-images-upload/
MIT License
348 stars 154 forks source link

onDrop fires twice #88

Open salmazov opened 6 years ago

salmazov commented 6 years ago

I add some files to uploader -> onDrop event fires twice "react-images-upload": "^1.2.3",

kibernetika commented 5 years ago

Problem in source file index.js in 90 line:

this.setState({pictures: dataURLs, files: files}, () => { this.props.onChange(this.state.files, this.state.pictures); });

Callback call on parent method onChange. I don't undestand for what?

kibernetika commented 5 years ago

Temporarily solution is making global variable Set type. Thoose in ever drop/add image adding in it file name and check before adding. If file name is exist in Set return from onDrop:

class AdminSlider extends Component {

check_images = new Set();

onDrop(pictureFiles) {
    if (pictureFiles.length > 0) {
        let index = pictureFiles.length - 1;
        if(this.check_images.has(pictureFiles[index])){ return }
        this.check_images.add(pictureFiles[index]);
       //...
    }
}

}

jcrain commented 5 years ago

Is it possible to get this published to npm? The current version seems to still have this bug.

Unicity-Pimentel commented 5 years ago

Same issue. I hope it gets published soon

teknolojia commented 5 years ago

@JakeHartnell @kibernetika Thanks for hard work, has this issue been fixed? It still fires twice to me!

sw7x commented 4 years ago

https://github.com/JakeHartnell/react-images-upload/pull/95 is merged and this issue is still remains

Problem is in source file index.js in line 143 line:

removeImage(picture) { const removeIndex = this.state.pictures.findIndex(e => e === picture); const filteredPictures = this.state.pictures.filter((e, index) => index !== removeIndex); const filteredFiles = this.state.files.filter((e, index) => index !== removeIndex);

this.setState({pictures: filteredPictures, files: filteredFiles}, () => {
    this.props.onChange(this.state.files, this.state.pictures);
});

}

after state change Callback call on parent method onChange need to remove it (remove below line) this.props.onChange(this.state.files, this.state.pictures);