Embed Document

[Catra]

Is it possible to display a document that is uploaded from Dropbox?

[Kurumi]

Hi @Catra- you can embed documents in DataPages, see this article: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/tech-tip-embed-documents-in-datapages/

For Dropbox, follow this workaround:

1. Change the code with this:

<object style="width:718px; height:700px;" frameborder="0" data="[@field:Attachment]" type="application/pdf">
<embed src="[@field:Attachment]" type="application/pdf" />
</object>

You can freely change the height and width. 

2. Replace the end of the URL with 'raw=1'. Here's an example:

From: https://www.dropbox.com/Link.pdf?dl=0
Change it to: https://www.dropbox.com/Link.pdf?raw=1

Then Disable AJAX of the DataPage  - to disable, check this article: https://howto.caspio.com/datapages/ajax-loading/

[TellMeWhy]

EDIT- wrong post

 

[Kurumi]

Hi @Catra - you can also download it automatically in your page. See the link here on how: https://help.dropbox.com/files-folders/share/force-download

[futurist]

Hi,

If any of you want to be able to embed documents on your DataPage (as seen here: https://howto.caspio.com/tech-tips-and-articles/tech-tip-embed-documents-in-datapages/) but are wary because the pre-requisite is to upload your files in FileStor only if they're non-sensitive, what you can do is embed documents uploaded in your Google Drive.

1. Upload the file on Google Drive.
2. Right-click on the file.
3. Select Get link.
4. Open the General access drop-down menu.
5. Select "Anyone with the link" to publish your image.
6. Click Copy link > Done.

You will get a URL like the following:
https://drive.google.com/file/d/1wMgCWAsqlw0nXcMhCldTbwSznMdXUmBT/view?usp=share_link

In this link, you would need the File ID, which is the "1wMgCWAsqlw0nXcMhCldTbwSznMdXUmBT" on the example above (the File ID would be different for every file so make sure to copy the File ID from the link you copied). Put the File ID in the following simple view link:

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

In practice, it would look something like:
Result:
https://drive.google.com/uc?id=1wMgCWAsqlw0nXcMhCldTbwSznMdXUmBT

This last link would be the link that you are going to store in the text field, and that text field is what you're going to reference on the src in the HowTo article for emedding documents.

For example, the text field in question is named Viewable_File_URL, on the DataPage, you would use it like:

<iframe src="https://docs.google.com/gview?url=[@field:Viewable_File_URL]&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>

And this would allow you to view the PDF even when the file is stored in your Google Drive.

[Kurumi]

Hi! Just wanted to share this solution when displaying the image from Google Drive:

<img src="https://drive.google.com/thumbnail?id=xxxxxxxxxxx">

or by declaring the size

<img src="https://drive.google.com/thumbnail?id=xxxxxxxxxxx&sz=w1000">

For reference, you can check this article: https://stackoverflow.com/questions/15557392/how-do-i-display-images-from-google-drive-on-a-website

If you have an existing HTML code for displaying the Google Drive image and it does not work, you can check this recent thread about the issue: https://support.google.com/sites/thread/253003338/images-from-google-drive-in-embedded-html-no-longer-working?hl=en

You may also reach out to Google Workspace Support for other workarounds on how to show the images from Google Drive.