Hi,
Recently we migrated to PrimeReact 8.6.1 version and I notice there is an issue managing the state of the file upload component earlier we validated the files and valid files are added to the state of the file upload component but when trying to do the same we are getting an error like fileUploadRef.current.setState is not a function.
I read the documentation but didn't find a way to solve the issue (Managing the FileUpload component's state) is there a way to accomplish our requirement? I believe that we will be help from you soon. Thanking you in advance
File Upload State issue
Issue: https://github.com/primefaces/primereact/issues/3174
Fixed in 8.5.0 by exposing the files on the `ref`: https://github.com/primefaces/primereact/pull/3176
But it looks like you need to submit another enhancement request we never thought someone would need to manipulate the internal file state. A better way to do want you want is to use "onBeforeSelect" event which gives you a change to "cancel the selected file" while validating it.
returning false stops that selection...
Fixed in 8.5.0 by exposing the files on the `ref`: https://github.com/primefaces/primereact/pull/3176
But it looks like you need to submit another enhancement request we never thought someone would need to manipulate the internal file state. A better way to do want you want is to use "onBeforeSelect" event which gives you a change to "cancel the selected file" while validating it.
Code: Select all
const onBeforeSelect = (e: FileUploadSelectParams) => {
let event = e.originalEvent;
let blob = {} as File;
if (event instanceof DragEvent) {
event = event as DragEvent;
blob = event.dataTransfer?.files![0]!;
} else {
event = event as React.ChangeEvent<HTMLInputElement>;
blob = event.target.files![0];
}
const fileName = files[0].name.toLocaleLowerCase();
if (!FileService.isExtension(fileName)) {
setErrorMessage(`Only proper file types are allowed to be uploaded and <strong>"${fileName}"</strong> is not valid.`);
return false;
}
};
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
-
- Posts: 6
- Joined: 02 Dec 2022, 14:41
Hi,
Thanks for responding However using onSelectHandler is not helping us as the event parameter passed for this handler function has the files property whose value equals the state of the FileUpload component.
Consider uploading a few files for the first time and triggering the onBeforeSelect event handler function the event parameter has the following value {originalEvent: SyntheticBaseEvent, files: Array(0)} as the state of the FileUpload component has the files property as an empty array initially.
The other issue is that returning false from the onBeforeSelect handler function cancels the entire selection assuming out of 10 files you have 2 invalid files. On returning false it rejects all 10 files instead of 2 invalid files.
The other concern I have is on uploading multiple files how do we restrict to a max upload value if state management is not possible here it is populating all the selected files on the screen.
Thanking you in advance, kindly help us to solve this issue.
Thanks for responding However using onSelectHandler is not helping us as the event parameter passed for this handler function has the files property whose value equals the state of the FileUpload component.
Consider uploading a few files for the first time and triggering the onBeforeSelect event handler function the event parameter has the following value {originalEvent: SyntheticBaseEvent, files: Array(0)} as the state of the FileUpload component has the files property as an empty array initially.
The other issue is that returning false from the onBeforeSelect handler function cancels the entire selection assuming out of 10 files you have 2 invalid files. On returning false it rejects all 10 files instead of 2 invalid files.
The other concern I have is on uploading multiple files how do we restrict to a max upload value if state management is not possible here it is populating all the selected files on the screen.
Thanking you in advance, kindly help us to solve this issue.
Can you submit a GitHub issue please? I think an enhancement is needed.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
-
- Posts: 6
- Joined: 02 Dec 2022, 14:41
Thanks for the suggestion I have raised a request in GitHub issues https://github.com/primefaces/primereact/issues/3750
Perfect I submitted a PR to fix it basically exposing a "setFiles".
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
-
- Information
-
Who is online
Users browsing this forum: No registered users and 1 guest