Preview of files

Ask the community
1

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.

2

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.

3

how about for office (excel, word etc) files?

4

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.

5

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
6

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

  1. Environment Config → Frame Targets: Add https://docs.google.com
  2. 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:

image
image509Ă—549 8.62 KB

7

Hey @kristian Can you please confirm if this solution (using google docs) still works for appfarm file content URLs? I can’t seem to make it work, most probably because of the url itself

8

Hi!

I can confirm that ppt works. I have not tried other file type, but I believe you must change that code for other files (i.e change “gview” to “gdoc” maybe?)

9

do I by any chance need to make the file public?

10

Yes, seems like you are correct! The “Public” flag must be checked on the “Create file object” action node when uploading these files!

PS: Note that only preview is possible (not edit).

11

Now it works! thanks!