如何在单文件模式下使用Dropzone？

Question

我正在使用React Hooks与Dropzone。

因此，我的代码看起来像这样：

const onDrop = (acceptedFiles) => {
  console.log(acceptedFiles);
};

const { getRootProps, getInputProps } = useDropzone({ onDrop });
return (
  <div {...getRootProps()} className="dropzone-container">
    <input {...getInputProps()} multiple={false} />
    // My component here
  </div>
)

现在，当我点击拖放区域时，我只能选择一个文件。这很酷。

但是，当我将多个文件拖放到拖放区域时，它们全部被接受。也就是说，在onDrop方法中，我可以通过参数acceptedFiles获取所有的文件。

有人能指出为什么会发生这种情况吗？我做错了什么吗？

- Vishal

Answer 1

你可以通过在 `useDropzone` 中传递 `multiple: false` 来忽略拖放的多个文件，只会选择第一个文件。

const onDrop = (acceptedFiles) => {
  console.log(acceptedFiles);
};

const { getRootProps, getInputProps } = useDropzone({ onDrop, multiple: false });
return (
  <div {...getRootProps()} className="dropzone-container">
    <input {...getInputProps()}/>
    // My component here
  </div>
)

- Shubham Khatri

Answer 2

您可以使用 multiple={false}。

<Dropzone onDrop={acceptedFiles => handleAcceptedFiles(acceptedFiles)} multiple={false}>
   {({ getRootProps, getInputProps }) => (
    <div className="dropzone">
      <div className="dz-message needsclick mt-2" {...getRootProps()}>
         <input {...getInputProps()} />
         <div className="mb-3">
         <i className="display-4 text-muted ri-upload-cloud-2-line"></i>
      </div>
      <h4>Drop Feature image or click to upload.</h4>
    </div>
   </div>
   )}
 </Dropzone>

- Sushil

Answer 3

你也可以使用 maxFiles: 1，

 const { getRootProps, getInputProps, acceptedFiles } = useDropzone({
    maxFiles: 1
  });

- Owais Ali