File Upload State issue

UI Components for React
Post Reply
Harsha Bulusu
Posts: 6
Joined: 02 Dec 2022, 14:41

02 Dec 2022, 14:54

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

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

05 Dec 2022, 23:02

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.

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;
		}
	};
returning false stops that selection...
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

Harsha Bulusu
Posts: 6
Joined: 02 Dec 2022, 14:41

06 Dec 2022, 13:47

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.

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

06 Dec 2022, 15:07

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

Harsha Bulusu
Posts: 6
Joined: 02 Dec 2022, 14:41

07 Dec 2022, 12:46

Thanks for the suggestion I have raised a request in GitHub issues https://github.com/primefaces/primereact/issues/3750

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

07 Dec 2022, 23:08

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

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests