No error message when trying to upload a file that exceeds a FileInput's maxSize attribute

[andrico1234]

What you were expecting:
If I try to upload a file via RA's FileInput and the file size exceeds the limit specified on the maxSize property. I expect the FileInput to not add the file to the list of files to be uploaded, and to display an appropriate error message.

What happened instead:
FileInput didn't add the file to the list of files to be uploaded (good)
FileInput didn't display any sort of error/validation message (bad)
I'm also not getting any helpful data via the useField's meta property.

Steps to reproduce:
Add this code to your Create/Edit page

const PostCreate = props => {
    return (
        <Create {...props}>
            <SimpleForm>
                <FileInput
                    source="pdffile"
                    label="PDF-Template"
                    maxSize={5000000}
                >
                    <FileField source="src" title="title" />
                </FileInput>
            </SimpleForm>
        </Create>
    );
};

Then try to upload any file.

I have a repro case here

Here's a video of the problem in action:

maxFile.mov

The first file I chose was under 5mb, the second was over 5mb.

Environment

• React-admin version: 3.17.0
• Last version that did not exhibit the issue (if applicable):
• React version:
• Browser:
• Stack trace (in case of a JS error):

[andrico1234]

After doing some digging, it seems that we can pass through onDropRejected as an option to FileInput. It won't solve an out-of-the box validation message, but will allow us to update helperText or display a notification.

I also don't think it gives us a reason for why the file was rejected. I'm happy to hear what you folks have to think

[djhi]

Thanks for reporting

[djhi]

To fix this, we'll have to first upgrade to the latest react-dropzone version as they added the reason why a file has been reject in v11.

However, what you're suggesting is that we treat the maxSize option (and probably all the others that filter the file such as minSize or accept) as validators.

I'm marking this as a feature request but we won't address it before v4.

[magicxor]

Workaround:

  const handleDropRejected = useCallback((fileRejections: FileRejection[]): void => {
    const errorMessage = fileRejections.flatMap(fr => fr.errors).map(err => err.message).join('; ');
    notify(`Invalid file(s): ${errorMessage}`, { type: 'error' });
  }, [notify]);

        <ImageInput options={{ onDropRejected: handleDropRejected }}>
          <ImageField />
        </ImageInput>

[jooleanth]

@magicxor Thanks! Works like a charm.

[fzaninotto]

There was not enough traction from the community to justify that the core team works on this feature request. So I'll close this issue, but feel free to open a PR (agains react-admin v4) that implements it.