# Preview of files **URL:** \ **Category:** Ask the community\ **Created:** [August 28, 2023, 6:38am UTC](https://community.appfarm.io/t/preview-of-files/654 "2023-08-28T06:38:24Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![habibftw](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/habibftw/32/1593_2.png) [@habibftw](https://community.appfarm.io/u/habibftw)\ **Post date:** [August 28, 2023, 6:38am UTC](https://community.appfarm.io/t/preview-of-files/654/1 "2023-08-28T06:38:24Z")
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. ---
**Author:** ![MartinB](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/martinb/32/112_2.png) [@MartinB](https://community.appfarm.io/u/MartinB)\ **Post date:** [August 29, 2023, 11:08am UTC](https://community.appfarm.io/t/preview-of-files/654/2 "2023-08-29T11:08:33Z")
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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types) in the `visibility condition`. For PDF files, MIME Type is application/pdf and images are images/jpg and images/png. ---
**Author:** ![habibftw](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/habibftw/32/1593_2.png) [@habibftw](https://community.appfarm.io/u/habibftw)\ **Post date:** [August 31, 2023, 8:29am UTC](https://community.appfarm.io/t/preview-of-files/654/3 "2023-08-31T08:29:06Z")
how about for office (excel, word etc) files? ---
**Author:** ![kristian](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/kristian/32/58_2.png) [@kristian](https://community.appfarm.io/u/kristian)\ **Post date:** [August 31, 2023, 12:14pm UTC](https://community.appfarm.io/t/preview-of-files/654/4 "2023-08-31T12:14:18Z")
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. ---
**Author:** ![simenzen](https://avatars.discourse-cdn.com/v4/letter/s/50afbb/32.png) [@simenzen](https://community.appfarm.io/u/simenzen)\ **Post date:** [October 11, 2023, 1:15pm UTC](https://community.appfarm.io/t/preview-of-files/654/5 "2023-10-11T13:15:17Z")
Hi, I also want to say that to preview office files would be nice and I hope its coming soon as a feature. ---
**Author:** ![kristian](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/kristian/32/58_2.png) [@kristian](https://community.appfarm.io/u/kristian)\ **Post date:** [October 11, 2023, 1:33pm UTC](https://community.appfarm.io/t/preview-of-files/654/6 "2023-10-11T13:33:45Z")
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](https://europe1.discourse-cdn.com/flex013/uploads/appfarm/original/1X/13db2eeda02af4f4d3ecccef01a5838fa5989c1c.png) ---
**Author:** ![habibftw](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/habibftw/32/1593_2.png) [@habibftw](https://community.appfarm.io/u/habibftw)\ **Post date:** [May 20, 2025, 11:56am UTC](https://community.appfarm.io/t/preview-of-files/654/7 "2025-05-20T11:56:45Z")
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 ---
**Author:** ![kristian](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/kristian/32/58_2.png) [@kristian](https://community.appfarm.io/u/kristian)\ **Post date:** [May 21, 2025, 10:01am UTC](https://community.appfarm.io/t/preview-of-files/654/8 "2025-05-21T10:01:00Z")
> [@kristian](#): > > return [https://docs.google.com/gview?url=${fileContentURL-in-appfarm}&embedded=true](https://docs.google.com/gview?url=$%7BfileContentURL-in-appfarm%7D&embedded=true) 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?) ---
**Author:** ![habibftw](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/habibftw/32/1593_2.png) [@habibftw](https://community.appfarm.io/u/habibftw)\ **Post date:** [May 21, 2025, 10:24am UTC](https://community.appfarm.io/t/preview-of-files/654/9 "2025-05-21T10:24:49Z")
> [@kristian](#): > > [https://docs.google.com/gview?url=${fileContentURL-in-appfarm}&embedded=true](https://docs.google.com/gview?url=$%7BfileContentURL-in-appfarm%7D&embedded=true) do I by any chance need to make the file public? ---
**Author:** ![kristian](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/kristian/32/58_2.png) [@kristian](https://community.appfarm.io/u/kristian)\ **Post date:** [May 21, 2025, 10:51am UTC](https://community.appfarm.io/t/preview-of-files/654/10 "2025-05-21T10:51:15Z")
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). ---
**Author:** ![habibftw](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/habibftw/32/1593_2.png) [@habibftw](https://community.appfarm.io/u/habibftw)\ **Post date:** [May 21, 2025, 10:55am UTC](https://community.appfarm.io/t/preview-of-files/654/11 "2025-05-21T10:55:50Z")
Now it works! thanks! ---
**Author:** ![SigurdEileras](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/sigurdeileras/32/2621_2.png) [@SigurdEileras](https://community.appfarm.io/u/SigurdEileras)\ **Post date:** [April 9, 2026, 8:02am UTC](https://community.appfarm.io/t/preview-of-files/654/12 "2026-04-09T08:02:11Z")
Hi @kristian🙂 I have a client who wants a preview of all files. However, making all files public is not an option for them. Is there a way to make this work with private file objects as well? // Sigurd ---
**Author:** ![SigurdEileras](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/sigurdeileras/32/2621_2.png) [@SigurdEileras](https://community.appfarm.io/u/SigurdEileras)\ **Post date:** [August 14, 2026, 8:36am UTC](https://community.appfarm.io/t/preview-of-files/654/13 "2026-08-14T08:36:30Z")
Hi again @kristian 🙂 Wanted to follow up here. Is it possible to do this without making the file public? If I have to make the files public, what are the security concerns I should consider? And are there ways to mitigate those risks? // Sigurd ---
**Author:** ![kristian](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/kristian/32/58_2.png) [@kristian](https://community.appfarm.io/u/kristian)\ **Post date:** [August 14, 2026, 12:03pm UTC](https://community.appfarm.io/t/preview-of-files/654/14 "2026-08-14T12:03:13Z")
Hi! The post above is almost 3 years old, so it might be other ways to do it (using coded component maybe?). The above suggestion is by using an iframe, which strips away cookies, requiring public files. So, I would start by investigating an alternative approach to iframe! My gut feeling is that it is possible to solve using coded component + Appfarm AI.