Dashboard configuration option to always show small previews

[denisahearn]

Initial checklist

• I understand this is a feature request and questions should be posted in the Community Forum
• I searched issues and couldn’t find anything (or linked relevant results below)

Problem

I have a form with three Uppy instances on it. I am specifying a height of 400 when configuring each Uppy Dashboard. This height is the shortest height I could use that will allow a single selected file to appear in the Dashboard without causing the Dashboard to scroll.

As you can see from the screenshot below, having three Uppy Dashboards on the same form, each with a height of 400, results in a pretty tall form.

To make the form less tall, one idea I have is to turn off "Single File" mode, such that when only one file is selected, the size of its preview is the same size as the previews when two or more files are selected. Unfortunately I don't see a configuration option in the Dashboard for this.

Just as a test, if I temporarily change @uppy/dashboard/src/components/Dashboard.js to remove line 37 (the following line of code), I'm able to achieve running the Dashboard with "Single File" mode turned off.

// Remove this line of code
'uppy-Dashboard--singleFile': singleFile

Now if I run with this code change, and I change the height of each Dashboard instance to 250, you can see the difference in form height in the screenshot below:

Ideally I would like to make the file previews and the Dashboard heights even less than 250, so that the overall height of my form is even less.

I am using version 3.0.6 of @uppy/core and version 3.2.2 of @uppy/dashboard

Solution

The Dashboard provides a configuration option to turn off "Single File" mode. A bonus would be if it also provided a configuration option for controlling the height of the file preview so that I could make the file previews slightly less tall.

Alternatives

The size of the file previews is determined dynamically from the configured height of the Dashboard, with configurable (and defaulted) minimum and maximum file preview heights that provide an upper and lower bounds for the file preview height.

[burakcank]

This feels like a missing core feature?

Can I also add, setting the dashboard height to something like 20vh seems to break the "remove file button" in the single file upload.

[Murderlon]

We are currently working to improve styling around this. I'm not sure if it needs an option though, the idea is that if you add one file it doesn't look odd in a grid, once you add more later it's immediately a grid, and multiple files at once is also a grid.

@arturi will make a PR for some improvements soon!

[denisahearn]

@Murderlon Thanks, the changes in #4374 look awesome. Can't wait for the next official Uppy release that contains them!