[Feature Request]: Allow FileUploader internal files state to be mutated

[VadimDez]

The problem

Right now we can set multiple={true} and select as many files as user wants. No way to limit amount of files to be selected in total.

The solution

Adding a new property max or modifying multiple property to accept a specific number.

Examples

No response

Application/PAL

No response

Business priority

None

Available extra resources

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[github-actions]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.

[tay1orjones]

Hi @VadimDez, thanks for opening this issue! For the inputs we try to follow what's available natively in the browser. Unfortunately the multiple attribute doesn't have support for a maximum file count/limit, so there's no way to instruct the browser to only allow a certain amount of files in the OS file selection dialog.

I think the best way to approach this would be to run validation after the file(s) upload and present the user an error message if they've selected/uploaded more than what is allowed.

[VadimDez]

@tay1orjones thanks for reply, unfortunately internal state is already updated and it's rendering filenames right after the user selects files. I could show an error message, but how do I update the state (files) in FileUploader?

[tay1orjones]

@VadimDez looks like when FileUploader used to be a class component we exposed a state clearing function via a ref.

carbon/packages/react/src/components/FileUploader/FileUploader.tsx

Lines 172 to 175 in 261d33c

	const clearFiles = () => {
	// A clearFiles function that resets filenames and can be referenced using a ref by the parent.
	updateState({ fileNames: [] });
	};

That could be added back with a useImperativeHandle, and that function could be extended to support parameters supporting the removal of certain files from the internal state array.