Topic: Unexpected behavior - File upload plugin
When we use the "Input maxFileQuantity" to set the maximum number of files, and this quantity is exceeded, the plugin clears the uploads.
It should only show the error message and keep the files on the screen, otherwise the user understands that the uploads have been cleared.
The fileUpload.reset() is not used.
<mdb-file-upload [maxFileSize]="1" [acceptedExtensions]="'image/*, video/*'" [multiple]="true"
[maxFileQuantity]="2"
[formatError]="'Arquivo possui formato incorreto (permitidos(s) .jpeg, .jpg, .png, .webp, .mp4)'"
[mainError]="'Ops, algo deu errado.'" [defaultMsg]="'Clique Aqui ou Arraste e solte uma imagem/video'"
[previewMsg]="'Arraste e solte uma imagem/video aqui ou Atualize'" [removeBtn]="'Remover'"
(fileAdded)="onFileAdded($event)" (fileRemoved)="onFileRemove($event)"
(uploadError)="onUploadError($event)"></mdb-file-upload>
onUploadError(event: File) {
console.log('UploadError: ', event);
console.log('UploadError files: ', this.filesUpload);
}
Hi, The native file picker dialog can’t be controlled or kept open by us. What’s happening is that when the selection exceeds the max, we simply don’t add those files to the list and show an error, nothing should actualy be cleared - just not added.
Best Regards!
allancmello pro premium commented a week ago
I understand, and the list of files that have been added to the upload is not reset. The problem is that the error message removes the uploads already made from the screen, which leads the user to false information. This causes the user to upload files again, duplicating the upload.
Also note that the error message regarding exceeding the file limit is not listed in the documentation and therefore cannot be translated, this message visually removes the files from the screen.
The correct way for the plugin would be to display its messages in a pop-up or toast, without interfering with the visual display of the files that show the uploads already made.
This is the expected behavior of a component that performs uploads.
Bartosz Cylwik staff commented 6 days ago
Can you tell me how to recreate this? Im trying to test this both on the docs page and on the vanilla JS fresh app but it seem to work fine for me.
- Im selecting 2 images => 2 images in the preview
- Im selecting additional 4 images (as multiple select) => still the 2 images from before are in the preview, nothing is unselected from before and in events they are still visible
- After selecting those 4 images - I do not see any error exceeding file limit message anywhere on the screen
Im testing versions 9.0.0 to 9.3.0
Are you able to recreate the issues you are experiencing in the fresh, vanilla js app in the latest 9.3.0 version?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 9.0.0
- Device: All
- Browser: All
- OS: All
- Provided sample code: No
- Provided link: No