vaadin
[upload] Implement "compact" mode to show single progress bar instead of file list
Description
Vaadin Upload supports batch uploading multiple files at once. It also have a feature that it shows the files being uploaded with a row in the UI, that shows file name, its status and also a progressbar about the upload request (if active). With a large number of uploads, the amount of generated DOM becomes so huge that the browser chokes under the load.
Currently the DOM pressure causes noticeable slowness, but if #6698 will be fixed, this will become the real bottleneck.
As a related note, showing progress of individual files becomes meaningless in the UI, if there is a large number of files.
Expected outcome
Upload UI should get into a batch mode, if there is more than n amount of files being uploaded. n should be configurable (and have a good attribute name) and should default to 5. In the batch mode, there should only be a single progressbar about the process (instead of e.g. 1000 for 1000 small files like currently) and individual files should not be shown at all. The progressbar should show the progress by the bytes sent in the batch and total bytes (sum of sizes of files in the queue).
There should also be a text line showing the progress: the file that is currently being uploaded, number of files remaining to be uploaded (and total in the batch), progress in percentage and bytes (formatted into metric system) and ETA.
Minimal reproducible example
Upload in multifile setup.
Steps to reproduce
Upload a n*1000 small files.
Environment
All
Browsers
No response
The feature would require a design on how the upload list should be implemented for cases with the large number of files to be uploaded (verifying the root cause of performance issue / consider using virtual scroll / consider simplifying progress bars)
@web-padawan has created a relevant prototype some time ago: https://github.com/vaadin/web-components/tree/proto/upload-virtualizer
In the batch mode, there should only be a single progressbar about the process (instead of e.g. 1000 for 1000 small files like currently) and individual files should not be shown at all.
This would require a separate prototype as the one mentioned above still renders separate vaadin-upload-file elements.
I would propose different kind of compact design when larger number of files are expected. This mode should be enabled by API.
In the compact mode the Upload should not show file list. Instead there should be a progress bar that is updated as file uploads get completed. Furthermore, the Upload component could have a text element where the name of the last completed file name is shown.
This kind of UI would be optimal when the file count is 50 to even thousand(s).
Renamed the issue accordingly to describe the suggested idea regarding the "compact" mode / single progress bar.
Workaround is to follow this documentation with simple form without list, for multiple file uploads: https://vaadin.com/docs/latest/flow/advanced/upload-resources
Creating your own upload component from atoms is not a workaround. Unrelated: that linked docs page should be stylished, probably creating more confusion than helping users as such..