Closed andrico1234 closed 11 months ago
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
Thanks for reporting
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.
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>
@magicxor Thanks! Works like a charm.
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.
What you were expecting: If I try to upload a file via RA's
FileInput
and the file size exceeds the limit specified on themaxSize
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
'smeta
property.Steps to reproduce: Add this code to your Create/Edit page
Then try to upload any file.
I have a repro case here
Here's a video of the problem in action:
https://user-images.githubusercontent.com/17087167/125942480-92392ffd-69bd-4ab5-a9ed-472ad9e6b4a5.mov
The first file I chose was under 5mb, the second was over 5mb.
Environment