Forum Academy Marketplace Showcase Pricing Features

Preview of a File/document saved in Amazon s3?

Is there a way to preview a file which is saved in bubble DB ( which is basically stored in Amazon s3) instead of downloading to view it?

Basically I know only to download the URL from amazon s3 and view the document as shown below.

what if we need to Preview the file instead of downloading it ? like the preview option to view gmail attachments if any

1 Like

Could you load it through an iFrame?

Here’s what worked for me:

[Note: The following solution worked for PDFs - not sure what type of file/document you’re using, you may need a different method for other document types.]

Since I had lots of docs to preview, I used a repeating group (RG).

Then, in the RG cell, draw an HTML element. Within the element, I used <iframe src= [ ENTER YOUR "CURRENT CELL’S [PDF FILE ] HERE ]
/frameborder=“0” width=“580” height=“569” allowfullscreen=“true” mozallowfullscreen=“true” webkitallowfullscreen=“true”>

That should do it. If you want to add visibility options (such as to buttons and so on you can do that too. I used a preview option (the small view) and then used a button to send it to a larger popup that let’s you see the file in all its glory.

A note about the [ENTER CURRENT CELL’S PDF FILE HERE ]: for this you can just use the data field name you used to store the PDFs in; you do not have to use any of the subsequent syntax options such as ’ ‘s URL’, ‘:saved to S3’ or ’ ‘s file name’ - just stop at the Current cell’s [PDF field name].

Hope this helps,
P

5 Likes

Thankyou :slight_smile:

No problem.

By the way, most of the credit (if not all) goes to @NigelG since I think I learned how to do the framing from one of his posts elsewhere - if I recall correctly it was about displaying a Google slide show/presentation or something like that.

Glad it helped,
P

When I try this the browser ends up downloading (or prompting to) all the files instead of displaying.

I created the RG that has a source of search for Files and entered the “Current cell’s File File” in the iframe. Not sure what I’m missing but I might want to look for another file previewer altogether and see how to incorporate in Bubble as I need to preview Word files too…

I got it to work with both the Google viewer as well as the Office viewer. Here are the codes:

For Office:
<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=Current cell's File's File's URL' width='100%' height='100%' frameborder='0'</iframe>

For Google:
<iframe width="100%" height="800" frameborder="0" src="http://docs.google.com/gview?url=http:Current cell's File's File's URL&embedded=true"></iframe>

With Google I had to add the http part as the amazon link doesnt have the http by default. I had to ad the ‘URL’ part to the dynamic part too for it to work. Please note that my string says ‘File’ but that is the way I named my Thing.

The only downside is that these viewers do not seem to support images so I would have to create something else for that if I want to show them in the same RG. Perhaps a filter based on the file extension?

6 Likes

A slight addendum - I got the Google viewer to work without having to add ‘http:’ to the dynamic file URL.

Also, not sure if it is due to X-browser rule or not, but I had to use https for the Google viewer src link

Would anyone have a solution to still display the office files when they are privately uploaded?

2 Likes

Hi all, I second @vincent56’s request.

The iframe method definitely doesn’t work with private files.

One possible workaround I’m looking at is to send the files via authenticated API to a service like https://api.filepreviews.io/apps/

Would be great to find a simple solution.

Cheers
Travis

Hey tmonczko, did you get api.filepreviews.io to work? I am looking into it as well, wanted to check if it worked for you. Thanks!