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

[DesiLogi]

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>

 

[Hastur]

@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

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>

 

[DesiLogi]

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. 

[DesiLogi]

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. 

[DesiLogi]

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

[kcastagnaro]

I would love a solution to the very same problem. Would like to view rather than download pdf files that are stored in Caspio but are confidential. Datapage is authenticated.

[Kurumi]

Hi @DesiLogi - replied to this thread:

 

[Kurumi]

Hi @kcastagnaro - you may try this solution from Caspio: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/tech-tip-embed-documents-in-datapages/

[kcastagnaro]

Thank you! But my files are stored in CASPIO and they are confidential, so that solution won't work since it says files have to be stored outside the database. 

[Kurumi]

Hi @kcastagnaro I see. In this case, you may need to have a FileStor enabled in your account and get the URL of the file to reference it in the iFrame. Here's a reference on how to get the link: 

https://howto.caspio.com/files-and-images/filestor-cdn/