FileUpload: Control internal files state

[harsha16208]

Describe the feature you would like to see added

I would like to request you introduce a possible approach for handling the state of the FileUpload Component as this helps the developers select only certain files which pass their validations and let them upload.

Is your feature request related to a problem?

I see there is no way of updating the state of the FileUpload component as it leads to an uncontrolled state for the number of files you are uploading or if you want to validate files based on certain criteria (like extensions) and want to reject invalid files.

If the state of the FileUpload component is unmanageable from an external component it leads to the unnecessary rendering of invalid files and we can't restrict users from uploading files within the limit.

Our problem statement is we want the user to upload only 3 files at a maximum and only certain extensions are valid but after performing our validations we are unable to manage the state of the FileUpload component thus resulting in uploading all the files selected by the user.

This is our file upload component

We accept only certain extensions of image format (gif|jpe?g|tiff?|png|webp|bmp) however see when we select .txt files they are also being rendered

Invalid files are rendered and unable to control the state of FileUpload

Also, you have mentioned in the forum to use the onSelect handler but I observed that the onSelect handler gets the event param which contains the FileUpload component's previous state and thus cannot validate the current selection.

On selecting files and when onBeforeSelect is triggered the event contains No files

When selecting multiple files and trying to validate in onBeforeSelectHandler returning false from the handler cancels the entire selection but not the invalid file selected.

Describe the solution you'd like

No response

Describe alternatives you have considered

No response

Additional context

No response

[melloware]

@harsha16208 can you give your exact example of what files are allowed ".png, .jpg" I don't see how ".txt" is getting in there if you are saying its not a valid format?

also I think I can just expose a setFiles method on the Ref to solve this issue?

[melloware]

I added a new method on the ref public setFiles(files: File[]): void;