Jump to content
  • 0

Display PDF stored in CB Files (via upload, with link in table field)


DesiLogi

Question

I'd put this in an old thread but I thought I should ask it anew so someone might notice.

I'm trying to utilize the Google Viewer solution to show a pdf in an html block in a datapage but can't get it to work. I've got a Details datapage, authenticated, that uses a table that stores files. In this case, a pdf file in Caspio Bridge's Files section. This test example's file path in the field "File_Name" is /TestPdf.pdf. 

The code isn't working and I can't figure out why. All I get is a 'No Preview Available' message. Does the user need to be signed into to Google Docs for this to work? Is there a prefix that needs to go in from of the File_Name field since it's just /TestPdf.pdf? Any help would be really appreciated!

<iframe id="iframe_pdf" style="width:80%; height: 1100px; display: none;" align="middle" frameborder="0"></iframe>
<script>
    document.addEventListener('DataPageReady', function (event){
        if(!("[@field:File_Name/]" == "")){
           embed_pdf();
        }   
    });
    function embed_pdf(){
        var google_link= "https://docs.google.com/gview?url=";
        var google_param = "&embedded=true";
        var pdf_link = "[@field:File_Name/]";
        var encoded_pdf_link = encodeURIComponent(pdf_link);
        
        var iframe_window = document.getElementById("iframe_pdf");
        
        iframe_window.style.display = "block";
        iframe_window.src=google_link + encoded_pdf_link + google_param;
    }
</script>

 

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

@DesiLogi

Hello!

To implement Such a iframe, your files should do the following:
1. Place PDF files in some folder
2. Enable the CDN FileStore

TxKLOuj.png

Also, the code should look like this:

<script type="text/javascript">
    document.addEventListener('DataPageReady', embed_pdf);

    function embed_pdf(){
        var pdf_link = "[@field:PDF_File/]";
        if(pdf_link === "") {
              return null;
        }
        var google_link= "https://docs.google.com/gview?url=";
        var google_param = "&embedded=true";        
        var encoded_pdf_link = encodeURIComponent(pdf_link);
        
        var iframe_window = document.getElementById("iframe_pdf");        
        iframe_window.style.display = "block";
        iframe_window.src=google_link + encoded_pdf_link + google_param;
        document.removeEventListener('DataPageReady', embed_pdf);
    }
</script>

You can place the code with iframe in any place of your DataPage.

<iframe id="iframe_pdf" style="width:80%; height: 1100px; display: none;" align="middle" frameborder="0"></iframe>

 

Link to comment
Share on other sites

  • 0

Hi Hastur,

Thanks for the code on this- I can't get it to work in testing, though. I do have Filestor enabled on the directory the pdf is located in so I'm not sure what the issue is. 

That said, the pdf files I need to display are sensitive to the user so they can't ultimately be in a Filestor enabled folder. There's an old thread that addresses this issue but I can't get the script to work from that either.  Is the code you posted working in your own testing? I'm trying to figure out why I can't get the pdf to display even in a Filestor folder. 

Thanks again for the help. If we can get this worked out I imagine it would be useful for a lot of Caspio users. 

Link to comment
Share on other sites

  • 0

I just realized that this does work: the code opens the PDF when the filename is clicked on (so instead of downloading the pdf it is opened in the browser). I'd thought the datapage would display the pdf upon opening so I'd thought it wasn't working.

This actually great- it does display the pdf as I need to, and clicking on the filename is no problem. The last issue is figuring out how to do it in a Filestor disabled folder because the files are private.  This forum thread addresses that aspect of it. It would be great if we could combine the non-Filestor aspect of that code with this code, then it'd be an awesome solution. 

Link to comment
Share on other sites

  • 0

Hi Hastur,

Here's an odd thing as well. Some pdf files are showing and some will just download when the file name is clicked on. In testing they're both in the same Filestor enabled folder and I can't see any different in the pdfs themselves. 

Here's a copy of a pdf file that's not showing up, if you have a chance to take a look. I don't know why this file is any different. Thanks again for the help!

EDIT: I think I figured out the reason for the attached file not displaying- it was physically larger than the iframe width setting. I changed the iframe to 100% width and height and it does show up now. So there is the remaining issue: 

How to get this to work with a non-Filestor folder for the pdf file. Here's a way to possibly tell the difference between the pdf being in a Filestore enabled directory vs one that's disabled: 

Path with Filestor enabled: https://docs.google.com/viewerng/viewer?url=https://cdn.caspio.com/C2104000/Moodboards/LivingRoom.pdf?ver%3D3

Path with Filestor disabled: https://docs.google.com/viewerng/viewer?url=https://c0afw773.caspio.com/dp/c2104000eb3da3ff88184764b5a3/files/8172684

It seems to me that it if the user has authenticated in Caspio (and they have in my example) then the file should be accessible to that browser to do whatever with, even if the directory is Filestor/disabled. The file can be opened in a datapage, downloaded, etc. So why can't Google Doc Viewer display it? The url must need some kind of modification or something. 

LivingRoom.pdf

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.

Guest
Answer this question...

×   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.

Loading...
×
×
  • Create New...