(Feat) : Allow previewing images when selecting them with the file picker. Now you can only see the file name

[dobri1408]

This pr will Allow previewing images when selecting them with the file picker.

[netlify[bot]]

✅ Deploy Preview for volto ready!

Name	Link
🔨 Latest commit	8f3a3dc33a247db0f4835ad34e00c15505883bc6
🔍 Latest deploy log	https://app.netlify.com/sites/volto/deploys/63ac3ce52fd06b00099436a9
😎 Deploy Preview	https://deploy-preview-4120--volto.netlify.app/release-notes/index.html
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[cypress[bot]]

---

Test summary

463 • 0 • 20 • 0

---

Run details

Project	Volto
Status	Passed
Commit	8f3a3dc33a
Started	Dec 28, 2022 12:59 PM
Ended	Dec 28, 2022 1:09 PM
Duration	10:04 💡
OS	Linux Ubuntu -
Browser	Chrome 108

View run in Cypress Dashboard ➡️

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[tiberiuichim]

Some stuff that would be nice to have:

• showcase this new feature in the storybook https://6.docs.plone.org/storybook/?path=/story/edit-widgets-object-browser--connected
• some form of test
• the news/4120.feature changelog

[sneridagh]

@dobri1408 @tiberiuichim @avoinea

We've been working in a solution for this, in the direction of Quanta mockups for our latest project:

The top right icon handler switches views thumbs/content.

Problem is that we don't know when we could backport it to core, but it seems to me that it's the right way to go, specially being the Quanta way too. On the other hand, it could take a while until we could do it. What do you think?

/cc @tisto @davisagli @robgietema

[tiberiuichim]

@sneridagh I don't see a conflict in showing a thumbnail instead of the Icon, for images, on the default listing. What you're showing seems an alternative listing view of the ObjectBrowser, so we'd need both of them, in any case.

[dobri1408]

I added the cypress test and verify the storybook to see if my changes are visible, and they are.

[tiberiuichim]

@dobri1408 there's still failing tests, those should be fixed

[tisto]

@dobri1408 @tiberiuichim @avoinea @sneridagh a preview image functionality in the sidebar is definitely useful and something we need in core. Here are my thoughts:

• We discussed the option to show small preview images in the sidebar (and in folder contents as well). Our concern regarding this solution was that a small image is not very useful, because you can not really see the image and choose them properly, this is why we went in a different direction for our client project.
• If you want the solution to be useful, the users need to be able to see a larger version of the image. We thought about some kind of additional hover overlay that displays a larger version. @iFlameing worked on a prototype for the folder_content, which needs lots of love for details to be useful IMHO. In the sidebar, an overlay function like this seemed to be too much. Therefore we stopped this effort at some point.
• I am wondering about the performance implication of the small preview images. The preview image would show up in the default view. In this view, performance is extremely critical, because editors use this for literally everything (not only browsing images). We already run into performance issues, when working on large content trees (and issues with the 1000 items max setting in plone.restapi). We have projects with > 100k images and lots of images in single folders. When users switch to a dedicated "images" view, they might understand when it takes time to lazy load the images. We could solve this by lazy loading the images I guess. Though, even then, this can cause lots of small requests on a regular basis when the users don't really care about the actual image previews.

I am not opposed to this solution. I would just like to carefully consider the pros and cons of all the solutions. This is why we developed our solution in our project first to gain experience with it before considering contributing it to core.

Now that we are in Plone 6 final I think we need to establish a proper PLIP-like process for changes, where we discuss solutions before we move on to implement them. The @plone/volto-team should decide what goes in and what does not and if a feature goes into the Volto stable branch (16) or in a future version of Volto.

Let's discuss this in the next Volto team meeting.

[tiberiuichim]

[tiberiuichim]

@tisto If there's performance issues with the ObjectBrowser object picker, then they should be fixed properly, by virtualizing lists, batching, etc.

[tisto]

@tiberiuichim yeah. Of course. I just dropped the thoughts that crossed my mind. Nothing that we can not solve, just something that we have to take into consideration.

My concerns regarding performance are not related to the upload widget but to retrieving the contents of the sidebar. Say you have a folder with lots of images and the rendering of the sidebar content browser is blocked by the requests to the images. As said, we already saw the limitations of the current implementation (without the additional image requests) and this is something we have to solve (independently of this PR).

[tiberiuichim]

@tisto I'm not discussing the upload widget. I've uploaded two screenshots, to show "prior art" and what the expections would be, based on interactions that users have all the time:

• one is a system file picker dialog. Notice the image previews, even if it's just a listing.
• second is Plone's related items browsers, where the image preview is shown, but a bit bigger.

Based on these two, I think we should make the preview image (in ObjectBrowser sidebar) configurable, with the default being that the images show up. I think a huge website that shows performance issues by having image previews in the sidebar is not common, so we should favour the most common ones.