primefaces / primefaces/primereact

FileUpload: `maxFiles` and `extensions` validations

Open
#4,173 16 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Type: New Feature
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.