Display files from Google Drive and Dropbox

Display images, PDFs and other files from your cloud storages (Dropbox, Google Drive, etc.)

To use and display the images and files in UI Bakery from cloud storage, they need to be converted. Let's check the example of displaying images from Google Drive in the Table and a PDF file from Dropbox.

Converting image URLs from Google Drive

To use images from Google Drive in your table, it's important to convert the link to them following the pattern:

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

File_id can be obtained from the image URL itself:

Getting the image id from the link

Here is a sample of a resulting link: https://drive.google.com/uc?id=1XpRlCnpAyA0_dDBjtLFQqRdH8XxCJjA5. This link should be included in your data source.

Please note that the link to the image will be recognized by the system as a Link field type, so in order to display the final image, change the field view type from Link to Image.

Displaying PDF files from Google Drive

To display PDFs from your Google Drive, follow the below steps:

1. Obtain a Google Drive link to a necessary file and transform it using the pattern:

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

File_id can be obtained from the file URL itself:

2. Next, add a new action - HTTP request. Select GET method and specify the link into the URL field

3. Modify the result with:

return {{ data.base64}}

4. Drag PDF Viewer onto the working area and assign the newly created action to it.

Displaying PDF files from Dropbox

Dropbox links need to be modified in the following way:

1. Obtain a dropbox link to a necessary file - https://www.dropbox.com/s/n2gq6ordzbhgenk/test.pdf?dl=0

2. Replace dropbox.com with dl.dropboxusercontent.com -> https://www.dl.dropboxusercontent.com/s/n2gq6ordzbhgenk/test.pdf?dl=0

3. The received PDF link can be used in the PDF viewer component