禁用拖放区

Question

我在项目中使用react-dropzone，并设置了文件限制，但是如果我将任何图像拖到放置区域，该图像会在浏览器存储中等待。点击区域已禁用，但我仍然可以拖动一些图像

达到限制时我需要禁用拖放区

{allowUpload && files.length < limitFiles &&
            <div className="file-grid__instructions">
                {isDragActive
                    ? <p>Drop here...</p>
                    : <p>drag or click to upload</p>
                }
            </div>
        }{allowUpload && files.length >= limitFiles &&
            <div className="file-grid__instructions">
                {isDragActive
                    ? <p></p>
                    : <p>The limit ...</p>
                }
            </div>
        }

Answer 1

这是我的代码的结构。 我制作了一个自定义组件，可以处理单击和拖动功能。

我设置了 10 个图像和文档的限制，在这种情况下，如果我已经上传了 10 个文档图像，dropzone 将被禁用。 此外，我还添加了 5 个限制，这意味着我一次只能选择 5 个文档/图像。

还处理文档和图像格式。

我使用了preventDefault来处理dropzone的基本行为，它不会通过下载它（图像/文档）将您重定向到新页面。

interface IDragAndDropInput {
    disabled: boolean;
    loading: boolean;
    onChange: (e: File[]) => void;
    type: string;
    length: number;
}

const DragAndDropInput = (props: IDragAndDropInput) => {
    const { t } = useTranslation("common");

    const { disabled, onChange, loading, type, length } = props;

    const onDrop = useCallback(
        (droppedFiles: File[], fileRejections: FileRejection[]) => {
            if (fileRejections && fileRejections.length > 5) {
                toastMessageError(t("maximum_limit_exceeded"));
            }
            else if (fileRejections && fileRejections.length) {
                if (fileRejections[0].errors[0].code === ErrorCode.FileInvalidType)
                    toastMessageError(type === PERSONAL_STUFF_TYPE.image ? t("invalid_image_format") : t("invalid_file_format"))
                else if (fileRejections[0].errors[0].code === ErrorCode.FileTooLarge) {
                    toastMessageError(t(type === PERSONAL_STUFF_TYPE.image ? "invalid_image_size" : "invalid_file_size"))
                }
            }
            else if (droppedFiles.length) {
                onChange(droppedFiles)
            }
        },
        [type]
    );

    const { getRootProps, getInputProps, isDragActive } = useDropzone({
        onDrop,
        accept: type === PERSONAL_STUFF_TYPE.image ?
            {
                "image/png": [".jpeg", ".jpg", ".webp"],
            } : {
                "text/plain": [".csv"],
                "application/pdf": [".xlsx", ".docx", ".pptx"]
            },
        multiple: true,
        noClick: disabled,
        maxFiles: 5,
        maxSize: MY_COLLECTION_MEDIA_UPLOAD_SIZE_LIMIT
    });

    // handle default behaviour
    const handleDisabledDrop = (event: React.DragEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>) => {
        if (disabled) {
            event.preventDefault();
            event.stopPropagation();
            if (length >= 10) {
                toast.dismiss()
                toastMessageError(t("max_limit_msg", { type }))
            }
        }
    };


    return (
        <div className="model-upload"  {...getRootProps({ onDrag: event => handleDisabledDrop(event), onClick: event => handleDisabledDrop(event), onDrop: (event) => handleDisabledDrop(event) })} style={{ padding: isDragActive ? "60px" : "50px" }} >
            <div className="upload-content">
                {
                    loading ?
                        <>
                            <div className="fileupload-loader">
                                <Loading />
                                <h4>{t("uploading")}</h4>
                            </div>
                        </> :
                        <>
                            <input
                                {...getInputProps()}
                                type="file"
                                className={"upload-input"}
                            />
                            <UploadDocs />
                            <h4 >{t("drag_file")}</h4>
                        </>
                }
            </div>
        </div>
    )
}

<DragAndDropInput
    loading={fileLoading}
    disabled={fileLoading || loading || fileArray?.length >= 10}
    onChange={async (e) => {
        await onFileChange(e);
    }}
    type={watch("stuff_type")}
    length={fileArray?.length}
/>
                        
<DragAndDropInput
    loading={imageLoading}
    disabled={imageLoading || loading || imageArray?.length >= 10}
    onChange={async (e) => await onImageChange(e)}
    type={watch("stuff_type")}
    length={imageArray?.length}
/>