FileUpload: multiple=false but could add more than one file

[hrynevychroman]

Describe the bug

primevue-multiple-false-issue.mp4

I will open a fix PR

Reproducer

https://stackblitz.com/edit/zfjexy?file=src%2FApp.vue

PrimeVue version

4.0.7

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

All Browsers

Steps to reproduce the behavior

No response

Expected behavior

No response

[CCodam]

I think there's a misunderstanding about what the multiple prop is supposed to do.
According to the documentation, if set to true, "Used to select multiple files at once from file dialog.", which it accomplishes.
When set to false (default), you're not able to select multiple files in the browser dialog nor drop multiple files into the upload area at once. You can however, as you've shown, browse/drop one file at a time, multiple times. This is the intended functionality, as I understand it.

If you want to limit the actual number of files allowed to be uploaded, you should use the fileLimit prop instead https://primevue.org/fileupload/#api.fileupload.props.fileLimit
Unfortunately the code does not prevent you from uploading past the fileLimit, it merely disables the upload button.
The FileUpload Template example that your code is based on, uses its own upload button, that does not comply with the fileLimit.

Tip

Rough fix of the FileUpload Template example, when using fileLimit.

Apply :fileLimit="1" to the component, add uploadedFiles to the header slot, then modify the :disabled prop of the upload button to

!files || files.length === 0 || files.length > 1 || (uploadedFiles && uploadedFiles.length === 1)

...and for a better UX add a :disabled prop to the browse button

(files && files.length >= 1) || (uploadedFiles && uploadedFiles.length === 1)

Please be aware, that the value of 1, in the above examples, needs to be manually changed when changing the fileLimit of the FileUpload component.

Important

The actual issue is that the FileUpload component relies on the disabled state of the upload button, instead of cancelling the upload procedure when the fileLimit would otherwise be breached.
All the necessary code is there, it's even used to cancel the auto upload here

primevue/packages/primevue/src/fileupload/FileUpload.vue

Line 155 in 22d6f8a

if (this.auto && this.hasFiles && !this.isFileLimitExceeded()) {

The check should instead reside within the uploader() function, so that both auto and manual uploads are checked against isFileLimitExceeded()