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

Question

我正在使用带有 dropzone 的 react-hooks。

所以，我的代码看起来像这样：

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>
)

现在，当我点击 dropzone 时，我只能选择 1 个文件。这很酷。

但是当我在 dropzone 上放置多个文件时，所有文件都被接受。我的意思是在 onDrop 方法中，我得到了 AcceptedFiles 参数中的所有文件。

有人能指出为什么会这样吗？我在这里做错了什么吗？

Answer 1

您可以继续multiple: false to useDropzone，它会在放置时忽略多个文件，并且只会选择第一个

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>
)

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>