primefaces / primefaces/primereact
FileUpload: `maxFiles` and `extensions` validations
Nobody has claimed this yet.
- Dominant language
- CSS
- Stars
- 8.3k
- Forks
- 1.2k
- PR merge metrics
- No merged PRs in 30d
Description
Describe the feature you would like to see added
https://primereact.org/fileupload/
I referred the above component documentation for version 7,8 and 9. None of these have props available for the user to configure the valid file formats and no of files allowed. I think these are very common scenarios for any UI in any application while having file upload feature.
Is your feature request related to a problem?
No validation for file formats or no of files is given out of the box ;
We do have prop called accept which just filters the files in windows dialog ; user is still free to click all files and then can select any file which is not there is accept - have tested this here https://stackblitz.com/edit/react-ztqd11?file=src%2Fdemo.js . I am able to attach a pdf file while the accept looks like this --> accept=".doc, .docx"
Describe the solution you'd like
I did find maxFileSize prop and corresponding message props like invalidFileSizeMessageDetail & invalidFileSizeMessageSummary.
Similar to this, there should be some props like :
For File format --- > allowedFileTypes (which can be an array of extensions allowed)
For No of files --> maxFilesAllowed (which should be a number)
and corresponding errorMessage Props for both of the above like invalidFileErrorMessage and ExceedMaxFilesErrorMessage.
Describe alternatives you have considered
We have custom validation functional component already written which was working fine till 7.2.0 release, but after upgrading to 8.7.3 and even tested in 9.2.1, its broken as we have to pass the ref of the file upload to this component and then we are getting errors like : (based on issues #2893 , #3045 , #3043 - shows as fixed but still does not work in 8.7.3 and 9.2.1 )
ref.current.setstate is not a function ,as in below code
fileUploadComponentRef.current.setState({ files: validFiles });
cannot read show of undefined ( ref.current.messagesUI ) #as in below code
fileUploadComponentRef.current.messagesUI.show({
severity: 'error',
summary: ,
});
Additional context
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the FileUpload component and its documentation at https://primereact.org/fileupload/, then reproduce the current accept behavior using the linked StackBlitz example. Define and implement validation for allowed file extensions and the maximum file count, including corresponding error messages, and verify the existing ref-based alternatives described in the issue are not required.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100