Jump to content

Embed Document

Recommended Posts

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" />

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/

Link to comment
Share on other sites

  • 1 year later...


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:

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:


In practice, it would look something like:

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.

Link to comment
Share on other sites

  • 1 year later...

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...