Accepting a specific number of files

By providing the maxFiles prop you can limit how many files the dropzone accepts. It applies when multiple is enabled; the default of 0 means no limit.

When more valid files are dropped than allowed, the first maxFiles are accepted and each surplus file is rejected with a too-many-files error (rather than rejecting the whole batch). When multiple is false the limit is always 1, so the first valid file is accepted and the rest are rejected the same way. Files that fail their own checks (wrong type, out of the [minSize, maxSize] range, or a custom validator error) are rejected with those errors and don't count towards the limit.

Drag 'n' drop some files here, or click to select files

(2 files are the maximum number of files you can drop here)

function AcceptMaxFiles() {
  const {acceptedFiles, fileRejections, getRootProps, getInputProps} = useDropzone({maxFiles: 2});
 
  const acceptedFileItems = acceptedFiles.map(file => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
    </li>
  ));
 
  const fileRejectionItems = fileRejections.map(({file, errors}) => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
      <ul>
        {errors.map(e => (
          <li key={e.code}>{e.message}</li>
        ))}
      </ul>
    </li>
  ));
 
  return (
    <section className="container">
      <div {...getRootProps({className: "dropzone"})}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
        <em>(2 files are the maximum number of files you can drop here)</em>
      </div>
      <aside>
        <h4>Accepted files</h4>
        <ul>{acceptedFileItems}</ul>
        <h4>Rejected files</h4>
        <ul>{fileRejectionItems}</ul>
      </aside>
    </section>
  );
}