title: In React-dropzone, how to tell the user the file's maxSize is too big?
body: <p>I am using the following to allow a user to upload a profile photo with <a href="https://github.com/okonet/react-dropzone" rel="nofollow noreferrer">react-dropzone</a>:</p>
  
  <pre><code>const FILE_FIELD_NAME = 'files';
  
  const renderDropzoneInput = (field) =&gt; {
    const files = field.input.value;
    let dropzoneRef;
    return (
      &lt;div&gt;
        &lt;Dropzone
          name={field.name}
          onDrop={( filesToUpload, e ) =&gt; field.input.onChange(filesToUpload)}
          ref={(node) =&gt; { dropzoneRef = node; }}
          accept="image/jpeg, image/png"
          maxSize={5242880}
        &gt;
          {({ isDragActive, isDragReject, acceptedFiles, rejectedFiles }) =&gt; {
            if (isDragActive) {
              return "This file is authorized";
            }
            if (isDragReject) {
              return "This file is not authorized";
            }
            return acceptedFiles.length || rejectedFiles.length
              ? `Accepted ${acceptedFiles.length}, rejected ${rejectedFiles.length} files`
              : "Try dropping some files.";
          }}
        &lt;/Dropzone&gt;
  
        &lt;button type="button" onClick={() =&gt; { dropzoneRef.open() }}&gt;Open File Dialog&lt;/button&gt;
  
        {field.meta.touched &amp;&amp;
          field.meta.error &amp;&amp;
          &lt;span className="error"&gt;{field.meta.error}&lt;/span&gt;}
        {
          files &amp;&amp; Array.isArray(files) &amp;&amp; (
          &lt;ul&gt;
            { files.map((file, i) =&gt;
              &lt;li key={i}&gt;
                &lt;img key={i} style={{width: 50, height: 50}} src={file.preview} alt="preview" /&gt;
                {file.name}
              &lt;/li&gt;
            )}
          &lt;/ul&gt;
        )}
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>... inside my redux-form:</p>
  
  <pre><code>    &lt;div&gt;
        &lt;label htmlFor={FILE_FIELD_NAME}&gt;Files&lt;/label&gt;
        &lt;Field
          name={FILE_FIELD_NAME}
          component={renderDropzoneInput}
        /&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>React-dropzone is currently respecting the maxSize, where it rejects files that are over 5megs. The problem is react-dropzone is not telling the user the file is too big.</p>
  
  <p>How can I update the above to tell the user if the file exceeds the maxSize allowed? </p>