Preview of files

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.


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


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):

  1. Environment Config → Frame Targets: Add
  2. In your App: Add an iframe, with the following URL (defined by a function)

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: