1

i'm trying upload multiple file with Dragger of ant design, but when I upload multiple files the onChange event is also called multiple times, it causes duplicate files

const handleChange = ({ fileList }) => {
    console.log(fileList);
    setFileList(fileList.filter(file => file.status !== "error"));
    var notUploadYet = fileList.reduce((accumulator, file) => {
        if (!fileUploaded.find(x => x.name === file.name)) {
            accumulator.push(file);
        }
        return accumulator;
    }, [])
    const handleUpload = async () => {
        try {
            for await (const file of notUploadYet) {
                const typeMedia = file.type.split('/')[0]
                var nameOnCloud = typeMedia === "video" ? `videos/${file.name + v4()}` : `images/${file.name + v4()}`
                const storageRef = ref(storage, nameOnCloud);
                await uploadBytes(storageRef, file.originFileObj)
                console.log('upload success')
                try {
                    const link = await getDownloadURL(storageRef)
                    setFileUploaded([...fileUploaded,
                    {
                        name: file.name,
                        link: link,
                        nameOnCloud: nameOnCloud,
                        type: typeMedia
                    }
                    ])
                } catch (error) {
                    console.log(error)
                }
            }
        } catch (error) {
            console.log(error)
        }
    }
    handleUpload()
}
<Dragger
    listType="picture-card"
    fileList={fileList}
    beforeUpload={beforeUpload}
    onPreview={handlePreview}
    onChange={handleChange}
    onRemove={handleOnRemove}
    multiple={true}
>
    <AiOutlineUpload style={{ 'fontSize': 30 }} />
    <div className="uploadText">
        <p>Kéo và thả ở đây hoặc click để chọn</p>
    </div>
</Dragger>

I want the onChange event to be called only once when I upload multiple files

0 Answers0