Displaying files from Google Drive and Dropbox

UI Bakery allows you to display images and files from your cloud storage, but they need to be converted first. In this article, we'll show you how you can do that on the examples of Google Drive and Dropbox. Let's dive in 👇

Displaying images from Google Drive

To use images from Google Drive in your table, you need to convert the link to them following this pattern:

https://drive.google.com/thumbnail?id=FILE_ID

Let's review the step-by-step instruction here:

1. Click Share next to the image you want to use in your table.

2. In the window that opens, set the access to Anyone with the link and copy the link. The link will look like this:

https://drive.google.com/file/d/1VmwkJGfaT5smm-dOZ-jsDZ3lH9AGxtlQ/view?usp=sharing

1. Next, copy the file id from the obtained link and paste it in the required pattern to get the resulting link like this:

https://drive.google.com/thumbnail?id=1VmwkJGfaT5smm-dOZ-jsDZ3lH9AGxtlQ

1. In the Table component, add the link from step 3 to the necessary field.

2. Now, change the field type from Link to Image.

This is necessary to display the final image since a link is recognized by the system as a Link field type.

That's it! Your image should now be displayed in the Table.

Since the final image is a thumbnail with the default resolution of around 200 px, you can also add &sz=w###-h### at the end of the link, replacing the hashtags with the width and height you need. So, your resulting link will look like this:

https://drive.google.com/thumbnail?id=1VmwkJGfaT5smm-dOZ-jsDZ3lH9AGxtlQ&sz=w1280-h994

Displaying PDF files from Google Drive

To display PDF files from Google Drive, you need to convert the link to them following this pattern:

https://drive.google.com/uc?id=FILE_ID

Let's review the step-by-step instruction how to do that:

1. Click Share next to the file you want to use in your table.

2. In the window that opens, set the access to Anyone with the link and copy the link. The link will look like this:

https://drive.google.com/file/d/1F9NCSMf7MUMdT6aALelPtil3er4LYdub/view?usp=sharing

1. Next, copy the file id from the obtained link and paste it in the required pattern to get the resulting link like this:

https://drive.google.com/uc?id=1F9NCSMf7MUMdT6aALelPtil3er4LYdub

1. Now, in the app create a new action of the HTTP request type, select GET method, and specify the link from step 3 in the URL field.

2. Here in the action, turn on the Transfrom result toggle, modify action result with return {{data.base64}}, and execute the action.

3. Next, add the PDF Viewer component to your working area and assign the newly created action to it.

Done! Now you can display the PDF file in your application.

Displaying PDF files from Dropbox

In order to display PDF files from Dropbox, you also need to modify their links. Check out the step-by-step instruction below👇

1. Click Share next to the file you want to display and copy its link. The link will look like this: https://www.dropbox.com/scl/fi/2hhw9gk99dhp3vqrqqhpc/Sample.pdf?rlkey=icwx5vl2scyh2t9vq0lw1ztbi&st=9skj0sm0&dl=0

2. Now, replace dropbox.com with dl.dropboxusercontent.com to get the resulting link like this: https://www.dl.dropboxusercontent.com/scl/fi/2hhw9gk99dhp3vqrqqhpc/Sample.pdf?rlkey=icwx5vl2scyh2t9vq0lw1ztbi&st=9skj0sm0&dl=0

3. Add the PDF Viewer component to the working area and copy the resulting link in the component's Link to PDF field.