Ant Design upload component - enable sending multiple files in single request

Question

I am using ant design upload component to upload multiple files to the server.

const props = {
    multiple: true,
    showUploadList: false,
    beforeUpload: () => {
        return false              
    },
    onChange: (info: any) => {
        console.log(info)
        setAttachmentLoader(true)
        info.fileList.forEach((file: any) => {
            formData.append("upload2[]", file.originFileObj)
        })
        formData.append("_charset_", "UTF-8")
        formData.append("upload2-data", "")
        uploadApiFunction(formData, (res: any) => {
            setAttachmentLoader(false)
            res.text && message.success(res?.text, 4)
        }, (err: any) => { console.log(err); setAttachmentLoader(false) })
    },
};

            <Upload {...props} fileList={[]}>
                <PrimaryButton text="Add attachment" />
            </Upload>

The api is getting called for each file when I upload multiple files. I want all the selected files should get uploaded to the server in a one single request.

Can anyone help me ?

Answer 1

onChange is called every time when the list of files changes, you need to transfer onChange call to another button as shown in the documentation