hey guys, is it possible to create a functionality where if you hover over the file it will open a pop-up and give a preview of the file contents? FIles including pictures, PDFs, and office files.
Hi,
To achieve this, you could use event handler On hover start and On hover end to open/close a popover when your mouse enter/leaves a container containing your file. Inside the popover you can place a component for displaying the relevant file.
For example, if you want to display a PDF or an image file you could use the PDF Reader component or the Image component. Place these two inside a visibility container and use MIME type in the visibility condition. For PDF files, MIME Type is application/pdf and images are images/jpg and images/png.
how about for office (excel, word etc) files?
Hi! We have no built-in components for preview of office files. Coded Component / third party may be used for that. However, we would like to explore this internally to consider it as a feature in Appfarm for the future.
Hi, I also want to say that to preview office files would be nice and I hope its coming soon as a feature.
1 Like
Hi!
Yes, it would be a nice built-in feature!
But, a quick solution seems to be the following, using google docs previewer in an iframe (works on both google docs and microsoft):
- Environment Config → Frame Targets: Add
https://docs.google.com - In your App: Add an iframe, with the following URL (defined by a function)
return https://docs.google.com/gview?url=${fileContentURL-in-appfarm}&embedded=true
I’ve tested with both docx, pptx and xlsx, and all displays nicely in the iframe and with a built-in “open in new tab” icon as well:
