Accepting specific file types

By providing the accept prop you can make the dropzone accept specific file types and reject the others. The value is an object keyed by MIME type with an array of file extensions as values.

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

(Only *.jpeg and *.png images will be accepted)

function Accept() {
  const {acceptedFiles, fileRejections, getRootProps, getInputProps} = useDropzone({
    accept: {"image/jpeg": [], "image/png": []}
  });
 
  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>(Only *.jpeg and *.png images will be accepted)</em>
      </div>
      <aside>
        <h4>Accepted files</h4>
        <ul>{acceptedFileItems}</ul>
        <h4>Rejected files</h4>
        <ul>{fileRejectionItems}</ul>
      </aside>
    </section>
  );
}

Reacting during the drag

Because of HTML5 File API limitations, file names/extensions aren't readable during a drag, so use MIME types (e.g. image/*) if you want to react with isDragAccept / isDragReject:

Drop some files here ...

const {isDragActive, isDragAccept, isDragReject, getRootProps, getInputProps} = useDropzone({
  accept: {"image/*": [".jpeg", ".png"]}
});

Mime type determination is not reliable across platforms. CSV files, for example, are reported as text/plain under macOS but as application/vnd.ms-excel under Windows.