Provider thumbnails

[mifi]

Many providers are missing thumbnails. When users upload images (which is quite common), this makes the UX not very good.

There are two different kind of thumbnails that could be shown:

Browsing files

When selecting files in the native Google picker UI:

• Google Drive Picker: Not really possible it seems (not in our control and waiting for Google to fix) Improve Google Picker #5532 (comment)
• Google Photos picker: natively supported
• Dropbox: probably use batch endpoint: Thumbnails from cloud companion uploaders (Google Drive, Dropbox, etc) sometimes do not display before upload #5389 (comment)

Selected files

After having selected files, in the Uppy UI:

• Google Drive Picker: Requires proxying, because we need to include the Auth Token Bearer header which an <img> cannot do.
• Google Photos Picker: same as Google Drive Picker
• Dropbox: already implemented however it might be broken: Dropbox thumbnails are broken #5596

Proxying

One problem with proxied thumbnails is that it would involve a lot of requests to the Companion server. This could be mitigated with one of either:

• Make sure that we only fetch thumbnails for the images that are currently in-view in the HTML. When scrolling fast we probably need a debouncing/throttling
• Use batch endpoints where available, still need to render only those currently in-view and debouncing/throttling when scrolling
• If we simply proxy the full images, it would lead to high bandwidth usage for the client (e.g. if the user is trying to view thumbnails for 10MB images), which is unacceptable, so we need to either
  • specify a size parameter to the URL before proxying it (not all providers support this)
  • compress it in companion using e.g. sharp (cpu intensive and could be a security risk).

See also #5389

Alternatives

Make a Transloadit-backed integration for rendering thumbnails

[Murderlon]

• Make sure that we only fetch thumbnails for the images that are currently in-view in the HTML. When scrolling fast we probably need a debouncing/throttling

We already use loading="lazy" on <img> tags so we already have this without any additional complexity.