title: How to reject oversize file with Dropzone component?
body: <p>I'm using <code>Dropzone</code> component of <code>React-Dropzone</code> with Nextjs and TypeScript.</p>
  <ul>
  <li><p>I want to reject the upload if the file size is over 30MB (<code>30000000</code> Bytes). The reject message could be whatever at this point.</p>
  </li>
  <li><p>Currently, when dropping a big file into the zone - this error appears:</p>
  </li>
  </ul>
  <img src="https://i.stack.imgur.com/VJ52x.png" width="400" alt="error" />
  <p>I saw that there is a property called <code>onDropRejected</code> to use with <code>Dropzone</code> component in this <a href="https://react-dropzone.js.org/#src" rel="nofollow noreferrer">documentation</a> but how can we use this one instead of running into the error like above?</p>
  <br/>
  <p><strong>Here's how my UI looks like:</strong></p>
  <img src="https://i.stack.imgur.com/6MBAr.png" width="400" alt="error" />
  <p><strong>My code:</strong></p>
  <pre><code>type Props = {
    name?: string;
    isError?: boolean;
    onChange?: (id: string) =&gt; void;
  };
  
  export const FileUploader = ({ name, isError, onChange }: Props) =&gt; {
    const [uploading, setUploading] = useState(false);
  
    const [nameFile, setNameFile] = useState&lt;string&gt;('File format: CSV Maximum upload size: 30MB');
    const [currId, setCurrId] = useState('');
  
    useEffect(() =&gt; {
      name &amp;&amp; setNameFile(name);
    }, [name]);
  
    const handleDrop = async (acceptedFiles: File[]) =&gt; {
      setUploading(true);
      const file = acceptedFiles[0];
      const res = await AssetApis.create(file, AssetResourceType.marketingAction);
      if (res.id) {
        setNameFile(file.name);
        onChange?.(res.id);
        currId &amp;&amp; (await AssetApis.remove(currId));
        setCurrId(res.id);
      }
      setUploading(false);
    };
  
    return (
      &lt;div&gt;
        &lt;Dropzone
          onDrop={handleDrop}
          multiple={false}
          accept={['image/*', 'text/csv']}
          disabled={uploading}
          maxSize={30000000}&gt;
          {({ getRootProps, getInputProps }) =&gt; (
            &lt;div
              {...getRootProps({ className: 'dropzone' })}
              className='flex items-center w-full h-40 text-center'&gt;
              &lt;input {...getInputProps()} /&gt;
              &lt;div
                className={classNames(
                  'rounded flex h-full items-center justify-center flex-col flex-1 border border-dashed text-gray-700 mr-2.5 py-6',
                  isError ? 'border-danger' : 'border-gray'
                )}&gt;
                &lt;Icon name='upload' size={20} /&gt;
                &lt;div className='mb-2.5 text-medium'&gt;Drag and drop to upload&lt;/div&gt;
                &lt;button
                  type='button'
                  className='px-2.5 border-gray-700 border rounded-full text-small px-3 py-0.5'&gt;
                  Select file
                &lt;/button&gt;
                &lt;div className='mt-2 text-gray-500 text-small'&gt;{nameFile}&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          )}
        &lt;/Dropzone&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>