Want a way for users to preview a file without having to download it?
By default, whenever someone views a file in Bubble, it’s automatically downloaded and opened in a new tab.
In this guide, you’ll learn exactly how to create a feature that enables users to PREVIEW a file without saving it to their device. This is perfect for displaying documents like resumes or contracts within your app.
The process of previewing a file saved in your Bubble database (Amazon S3) includes:
- Building a feature for users to upload files
- Designing a popup to preview a file
- Utilising custom HTML to preview a file inside a popup
Full Transcript of Tutorial
1. Building a feature for users to upload files
Before we build the feature to preview a file in our app, we’ll first need to create a way for users to upload and store files in our Bubble database.
On a brand new page in our editor, we’ll start by adding a file uploader element. As the name would suggest, this element is where a user can upload a file from their local device.
Below this file uploader, we’ll then add a button. We’ll then customize this button to display the word ‘upload’.
When this button is clicked, we’ll run a workflow that ‘makes changes to a thing’. The thing we’d like to change in our database is the ‘current user’.
From here, we’ll need to select what data field to change for this user. At this point in time, the field doesn’t yet exist, so we’ll have to create this from scratch. For our example today, we’ll call this field ‘resume’ as it will allow someone to upload their resume to our app.
For this ‘resume’ field, we’ll set the field type as a file.
Now, within our workflow, we’ll update the ‘current user’s resume’ field, storing in it the value of our file uploader.
Finally, we’ll add an additional step in our workflow that sends someone back to our home page. To do this, we’ll add a navigation event, then set the destination page to our home page.
2. Designing a popup to preview a file
Once we’ve created the ability for users to upload files to our database, we can now focus on building a page where they can preview this file.
On a brand new page, we’ll add another button element. This time, our button will display the word ‘view resume’. When a user clicks this button, our goal is to show their resume within the same browser, all without having to download the actual file.
In order to display this file, we’ll add a popup element on our page, then have the contents of the file fit inside this element.
We’ll start by dragging a popup element onto our page. In Bubble, popup elements are hidden by default. They’re only displayed whenever you reference them within a workflow.
Before we build out the workflow to display this popup, we’ll first need to update the dimensions of the element. If you select the popup, then open the layout tab, we can set the minimum width to 0px. We’ll also need to set the maximum width to 600px.
While in our layout tab, we’ll also need to set a ‘container layout’ for this popup. The container layout will determine the position of any elements placed inside the group.
Because we’ll only need to add one element into the popup, we can set the container layout to a ‘column’. A column layout style means that elements will be stacked vertically.
Now, in order to display this popup, we’ll trigger a new workflow whenever our ‘view resume’ button is clicked on the page.
Within this workflow, we’ll select from our ‘element actions’, then choose show ‘show an element’. The element we’d like to show is going to be our popup.
3. Utilising custom HTML to preview a file inside a popup
After designing our popup, we can now focus on displaying a preview of the file inside the element. In order to display this, we’ll need to add some custom HTML. This HTML will display an iFrame with the contents of an uploaded file.
Under the ‘visual elements’ menu, you’ll see a HTML element. Simply drag that into your popup, then update the size of this to fit within the allocated space.
To do this, we’ll open the layout tab of our HTML element, then unselect that this element should be a fixed width. From here, we can set the minimum width of the element to 0px, then also update the maximum width to infinite px. This means that our HTML element will take up as little or as much as it possibly can inside our popup.
After designing our HTML element, we can now determine what file it should display to our end user. This is where we’ll need to source some custom code to embed an iFrame.
If you’re not familiar with iFrames, they’re like a small browser that runs inside your existing browser. Think of them as a window to another web page.
This means that instead of redirecting a user to a separate tab when they want to preview a file, we can instead display that file directly inside the iFrame.
Now, thankfully, I’ve already taken the time to prepare the code you’ll need to power your iFrame. You can simply copy and paste the code below:
<iframe width =”100%”height=”800” frameborder=”0” src=”https://YOURLINKHERE?embedded=true”></iframe>
When you paste this code into the HTML element, the only change you’ll be required to make is the source of the file to display.
Within the HTML code, you may notice a value that displays a link. This looks like ‘https://YOURLINKHERE?’. You’ll just need to replace this string with the dynamic value of a file stored in our database.
The file we’d like to display is the resume that a user has uploaded to their profile. To reference this file path, insert dynamic data, then display the ‘current user’s, resume, its URL path’.
This URL path is the location where the file is stored within Bubbles Amazon S3 storage.
Now, if run a preview of our app logged in as a user, we’ll first take the time to upload our own resume.
Once this resume is uploaded, we’ll then open the page to view this document. When we click the ‘view resume’ button on this page, you’ll see that our popup element will display, and within that, our iFrame is now showing the document we uploaded.
And just like that, this is how you can preview a file stored in your Bubble database without having to download it.