Our client wants to use an attachment upload not only for uploading, but also for “previewing” an uploaded image in its original (or almost original, at least preserving the aspect ratio) size.
What we tried is to increase the thumbnail size in the backend and the size of the attachment preview in the front end as well. However, the thumbnail has usually an aspectratio of 1:1 and does therefore not reflect the original image’s aspect ratio.
Now the question is, what is the best approach to achieve a “big” image preview?
- Trying to modify the
DefaultFileUpload component and setting the preview image to actually be the original image + somehow modify the size of the upload component?
- Keeping the attachment upload as-is, and adding an additional component which renders the original image. Is it possible to connect an “image view” to an attachment upload?
Hi, connecting an additional image view should be possible by customizing the attachmentHandler (or specifically, its getPreview method) and the upload widget
Everytime the DefaultFileUpload renders with an attachment, the method is called to show the preview image (if one exists). Since the method is called with the whole attachment, you could then load the original image and put it in a ResponsiveImageContainer widget that renders next to the upload widget.
With the latest update loading the original image only works if the attachment is assigned, which will not be the case for files you just uploaded or replaced. So you would also need to customize the onChange callback of the DefaultFileUpload (so you get the file object directly).
However, maybe this should also be a question for the widgets team as I am not sure whether there isnt a better solution available here 