I am using Ant design in my project. For file upload, I am using Dragger from Ant Design.

The issue is, when i set multiple = false and maxCount = 1, i can drag multiple files. Though its randomly uploading 1 file only but in my scenerio as I am dragging multiple files I need to show an alert saying Multiple file upload is not allowed.

I tried setting a value in onDrop method which I wanted to use in beforeUpload method. But it seems, beforeUpload is getting called before onDrop. So its not possible this way.

I tried these but didn't work: https://github.com/ant-design/ant-design/issues/17397

Here is my code of the dragger

const [droppedFile, setDroppedFile] = useState(0);
    const uploadData = {
        name: 'file',
        multiple: false,
        maxCount: 1,
        accept: 'text/csv,application/vnd.ms-excel',
        action: BASEURL + '/campaign/csv',
        data: {
            campaign: props.id
        },
        headers: {
            Authorization: "Bearer " + props.token
        },
        beforeUpload: file => {
            console.log(file);
            if (droppedFile > 1) {
                message.warning(`Multiple files are not allowed. Only one CSV file will be uploaded at a time.`);
                return false;
            }
            if (file.type != 'text/csv'
                && file.type != 'application/vnd.ms-excel') {
                message.error(`Invalid file format. Please upload a CSV file.`);
                return false;
            }
            return true;
        },
        onChange(info) {
            const { status } = info.file;
            if (status !== 'uploading') {
                console.log('uploading',info);
            }
            if (status === 'done') {
                // message.success(`${info.file.name} file uploaded successfully.`);
                console.log("uploaded file", info);
                if (info.file.response == 0) {
                    emptyData()
                }
                setData(info.file.response)
            } else if (status === 'error'
                || (info.file.type != 'text/csv'
                    && info.file.type != 'application/vnd.ms-excel')
            ) {
                console.log(info);
                // message.error(`${info.file.name} file upload failed.`);
                if (info.file.response.message == 'Not Found Exception') {
                    message.error(`No valid LinkedIn profile found`);
                } else {
                    message.error(`Invalid file format. Please upload a CSV file.`);
                }
            }
        },
        onDrop(e) {
            console.log('Dropped files', e.dataTransfer.files);
            // beforeUpload(e.dataTransfer.files)
            setDroppedFile(e.dataTransfer.files.length)
            if (e.dataTransfer.files.length > 1) {
                let validFile = false;
                for (let i = 0; i < e.dataTransfer.files.length; i++) {
                    if (e.dataTransfer.files[i].type == 'text/csv' || e.dataTransfer.files[i].type == 'application/vnd.ms-excel') {
                        validFile = true;
                        break;
                    }
                }
                if (!validFile) {
                    // message.error(`Invalid file format. Please upload a CSV file.`);
                    message.error(`Multiple files are not allowed. Upload only one file at a time.`);
                    // message.error(`${info.file.name} file upload failed.`);
                } else {
                    message.warning(`Multiple files are not allowed. Only one CSV file will be uploaded at a time.`);
                }
            } else {
                if (e.dataTransfer.files[0].type != 'text/csv' && e.dataTransfer.files[0].type != 'application/vnd.ms-excel') {
                    message.error(`Invalid file format. Please upload a CSV file.`);
                }
            }
        },
    };

And here is the html part

<Dragger {...uploadData}>
                                            <p className="ant-upload-drag-icon">
                                                <InboxOutlined />
                                            </p>
                                            <p className="ant-upload-text">Click or drag file to this area to upload</p>
                                            <p className="ant-upload-hint">
                                                Support for a single or bulk upload. Strictly prohibit from uploading company data or other
                                                band files
                                            </p>
                                        </Dragger>