How to use dropzone in a single file mode?

Question

I am using react-hooks with dropzone.

So, my code looks something like this:

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

Now, when I click on the dropzone, I can select only 1 file. That's cool.

But when I drop multiple files on the dropzone, all of them are accepted. I mean in onDrop method, I get all the files in acceptedFiles parameter.

Can someone point why is this happening? Am I doing anything wrong here?

Diomedes

Answer 1

You can pass on multiple: false to useDropzone and it will ignore multiple files on drop and only the first one will be picked

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

Fonda

Answer 2

You can use 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>

Contemporary

Answer 3

You can also use maxFiles: 1,

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

Lupe