-1
`import React, { useState, useEffect } from "react";

import { Upload, Button, message } from "antd";
import { VscInbox } from "react-icons/vsc";
import { v4 as uuid } from "uuid";
const { Dragger } = Upload;

function FileUploadAction() {
    ;
    const [fileList, setFileList] = useState<any[]>([]);
    useEffect(() => {
        console.log("STATE_CHANGED");
        console.log(fileList);
    });
    const handleBeforeUpload = (file: any) => {

        const hasZipFile = fileList.some(
            (f) => f.type === "application/x-zip-compressed"
        );
        const hasOtherFiles = fileList.some(
            (f) => f.type !== "application/x-zip-compressed"
        );


        if (file.type === "application/x-zip-compressed" && hasOtherFiles) {
            message.error(
                "Cannot upload a zip file after multiple files have been uploaded."
            );
            return false;
        } else if (hasZipFile && file.type !== "application/x-zip-compressed") {
            message.error(
                "Cannot upload multiple files after a zip file has been uploaded."
            );
            return false;
        } else if (file.type === "application/x-zip-compressed" && hasZipFile) {
            message.error(
                "Cannot upload multiple zip files after a zip file has been uploaded."
            );
            return false;
        }

        setFileList(prevFileList => [...prevFileList, file]);

        return false;
    };
    function handleUploadFiles() {
        var formData = new FormData();
        formData.append("uuid", uuid());
        fileList.forEach((file, index) => {
            formData.append(`import_file_${index}`, new Blob([file]), file.name);
        });
        fileList.forEach((_, index) => {
        });
    }
    const handleRemove = (selectedFile: {
        uid: string;
    }): boolean | Promise<boolean> => {
        const updatedFileList = fileList.filter((file) => {
            return selectedFile.uid !== file.uid;
        });

        setFileList(updatedFileList);
        return true; // Return `true` to allow removal of the file
    };
    ;
    return (
        <div className="App">
            <div className = "uploaded-file-container">
            <Dragger
                style={{ width: 500 - 48 }}
                fileList={fileList}
                defaultFileList={fileList}
                onRemove={handleRemove}
                beforeUpload={handleBeforeUpload}
                listType="picture"
                progress={{ showInfo: true }}
                multiple={true}
                data={(file: any) => {
                    return {}; // Return any additional data if needed
                }}
            >
                <p className="ant-upload-drag-icon">
                    <VscInbox fontSize={36} />
                </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>
            <Button
                type="primary"
                disabled={fileList.length === 0}
                onClick={handleUploadFiles}
                style={{ marginTop: 16 }}
            >
                Upload files
            </Button>
            </div>
        </div>
    );
}

export default FileUploadAction;
`

handleBeforeUpload() function handles showing the error message. The error message should be displayed only once no matter how many time that error occurs

Conditions to remember If zip file is uploaded at first and then other type of file is uploaded - It can't be done If other types of file is uploaded at first and then zip is uploaded - It can't be done If Zip file is uploaded at first and then again zip file is uploaded - It can't be done

0 Answers0