How to display PDF in file attachment fields

  • 1
  • 2
  • Question
  • Updated 10 months ago
  • Answered

File attachment fields can show the attached files in forms and reports, but only a few file types are accepted (jpeg and such). Is there a way around this so that PDF attachments can be shown either directly in the form, or as a pop up window (I believe that is called an Iframe ?) after clicking on some button for that purpose?

I now have that sort of working through a Chrome extension, which opens the PDF in another tab, but it's slow and cumbersome and has some unwanted side effects.

Photo of Berry

Berry

  • 10 Points

Posted 5 years ago

  • 1
  • 2
Photo of Matt

Matt

  • 0 Points
We need the same thing. It would be awesome if there were a way to preview the file instead of downloading upon clicking, much like in gmail? Any way to do this?
Photo of Jack

Jack, Champion

  • 50 Points
Hi Berry & Matt,
I've not heard of this being possible natively however it would be really useful, would suggest you add it as a feedback item and vote it up, the Quickbase team are always looking for good ideas to enhance Quickbase and add functionality. In case your unfamiliar with the feedback button you can find it on the My Apps page its an orange table half way down on the left. If you let me know when you have put it up ill add some votes to it myself as its something I too would like added.
Regards
Jack
Photo of Joseph Kurian

Joseph Kurian

  • 20 Points
We have an invoice management application in Quickbase where all the 3rd party invoices are stored as PDF files in Amazon S3 and this application is integrated with S3. In the application we created a button which contains a link to the S3 document. Clicking this button will open the document in a separate window.
Photo of Berry

Berry

  • 10 Points
Well, we had that using dropbox but it was a nuisance, especially when dropbox got issues with their shared links recently.  The new Quickbase rates for storage are competitive and we want to move everything in quickbase now, just need a way to see the document like you see JPEG files and such.  Am not keen for any third party stuff.
Photo of Ryan

Ryan

  • 60 Points
I was able to accomplish this with the Image Onload Technique:
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=320&rl=psr

Create a Formula - Text Field named Attachment Viewer (separate from the Image Onload field) in the desired table. Be sure to check the box allowing HTML and insert the following:

var text URL =
  "https://docs.google.com/gview?url="; &
  URLRoot() & "up/" & Dbid() & "/a/r" & [Record ID#] & "/eFID/v0&embedded=True";
"<embed src=\"" & $URL & "\" height=\"650\" width=\"900\">"

Replace FID with the field # of your attachment field.



In the module.js page under the desired headings (Edit Record/Display Record) paste the following:

$("#tdf_22").html($("#tdf_22").text().replace(/{{/g,"<").replace(/}}/g,">"));


Where I have 22 you'll need to adjust this # to be the placement of the Attachment Viewer in your form. Start with testing the # to the left of the field in the form builder and decrease from there if necessary. 
Ex: In my case it's the 23rd object on the form, and I need to use 22 in the script page.

I've attached a picture of the final result.
Photo of Carlos

Carlos

  • 714 Points 500 badge 2x thumb
Hi,

so I've tried this but can't get the PDF to display.
Got the JS Field & page:

(function(){
$("#tdf_26").html($("#tdf_26").text().replace(/{{/g,"<").replace(/}}/g,">"));
$("#tdf_27").html($("#tdf_27").text().replace(/{{/g,"<").replace(/}}/g,">"));
})();

Got the field to display
var text URL = "https://docs.google.com/gview?url="; & URLRoot() & "up/" & Dbid() & "/a/r" & [Record ID#] & "/e30/v0&embedded=True";
//"<embed src=\"" & $URL & "\" height=\"650\" width=\"900\">"
"<iframe src=\"" & $URL & "\" height=\"650\" width=\"900\">"


But get this error:



Help?!
Photo of Zach Lynch

Zach Lynch

  • 70 Points
Same issue for me. Did you ever resolve it?
Photo of Chad Brandmire

Chad Brandmire

  • 968 Points 500 badge 2x thumb
You need to change the properties of the file attachment field. you need to 'Allow open access'
Photo of mvelicu

mvelicu

  • 110 Points 100 badge 2x thumb
Did you find a fix for this error ? I have it too
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 28,844 Points 20k badge 2x thumb
I suggest you put in a suggestion over at the UserVoice ghetto and wait a few years to realize that this feature will not be added to the product. Then use script as suggested by Ryan above. If you have an issue using script ask a new question with exactly what problem you are encountering. Script solves all QuickBase problems.
Photo of Zach Lynch

Zach Lynch

  • 70 Points
I got the same error screen as Carlos.

I tested with a document in a public application and it worked. It seems that embedding it doesn't carry over the security from the main window. Do you know if I have to code in a token or something?
Photo of mvelicu

mvelicu

  • 110 Points 100 badge 2x thumb
Hi Dan,
I used the script as per Ryan's suggestion and I have the same error as Carlos. Instead to show the pdf , it shows the html of the page in pdf format :).

something curious, for an image I use the same formula(without google docs) and instead an iframe tag I use an image tag and it is working.
It seems the url  ....../a/r1/e21/v0 it works for images but not for the pdf. It not gets the pdf file but the html page.

Any sugestion ?
Regards,
Mihai
Photo of Jeff

Jeff

  • 156 Points 100 badge 2x thumb
I'm getting a syntax error when trying to save the rich text formula field. Any thoughts?

Formula syntax error

A formula cannot end with an assignment to a variable declaration.


var text URL = 
  "https://docs.google.com/gview?url=";   
  URLRoot() & "up/" & Dbid() & "/a/r" & [Record ID#] & "/e269/v0&embedded=True";
"<embed src=\"" & $URL & "\" height=\"200\" width=\"193\">"
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 57,102 Points 50k badge 2x thumb
What are you trying to do - just show a thumbnail?
Photo of Jeff

Jeff

  • 156 Points 100 badge 2x thumb
Yes, that's right.
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 57,102 Points 50k badge 2x thumb
Try this as a formula Rich text field type  but 

I have a few different formuals on file, try this one.  Replace the 6 with the fid holding the file attachment.  Play with the width to get the size you want.  You can also instead specify the height, but I suggest not specifying both as the image will get skewed.

"<img src=" & URLRoot() & "up/" & Dbid () & "/a/r" 
& [Record ID#] & "/e6/v0' width='300' >"
Photo of Carlos

Carlos

  • 714 Points 500 badge 2x thumb
Did anyone manage to get the PDF's to display again?
Photo of Jeff

Jeff

  • 156 Points 100 badge 2x thumb
Thanks for the new formula but it does not work for PDFs which is why I was trying to use the google viewer as Ryan suggested.
(Edited)
Photo of Mark Goodwin

Mark Goodwin

  • 82 Points 75 badge 2x thumb

Hi guys,

I’m currently evaluating whether to use Quick Base to deliver a business solution and the ability to view PDFs is a must-have feature.

I managed to get the file attachment to view if it is an jpg with a rich text field containing:

 "<img max-width=\"32px\" max-height=\"100px\" src=\"" & URLRoot() & "up/" & Dbid () & "/a/r" & [Record ID#] & "/e46/v0\" />"

 

And these variables :       

/iol               &rand='+new Date().getTime())};">

iol           <img qbu='module' src='/i/clear2x2.gif' onload="javascript:if(typeof QBU=='undefined'){QBU={};$.getScript(gReqAppDBID+'?a=dbpage&pagename=



However, when I attached a PDF and use a second text field with

var text URL = "https://docs.google.com/gview?url="; & URLRoot() & "up/" & Dbid () & "/a/r" & [Record ID#] & "/e46/v0&embedded=true";

"<embed src=\"" & $URL & "\" height=\"650\" width=\"900\">"

It just renders to this on the page!!!

<embed src="https://docs.google.com/gview?url=https://msip.quickbase.com/up/bnfd9ydpg/a/r5/e46/v0&embedded=t...; height="650" width="900">

 

Also, if I copy this url into a browser it just renders HTML.

 

Can anyone help?

 

Photo of Chad Brandmire

Chad Brandmire

  • 968 Points 500 badge 2x thumb
Are the file attachment field properties set to allow open access?
Photo of Mark Goodwin

Mark Goodwin

  • 82 Points 75 badge 2x thumb

Thanks - I set  allow open access to true and the https://docs.google.com/gview?url=https://msip.quickbase.com/up/bnfd9ydpg/a/r5/e46/v0&embedded=t...   worked fine.

However, for this solution the attachment needs to be private.

So, I think my problem is that the script for the "<embed"  is being rendered to text on the page rather than being treated as a script.

Photo of Chad Brandmire

Chad Brandmire

  • 968 Points 500 badge 2x thumb
The problem you're having is that this solution relies on using google docs, which is why you need to allow access outside of quickbase. 
If you can find a way to use a document viewer internally with your app that would solve your privacy problem. Unfortunately outside of finding a third party app I don't know of a way to do that
If you figure out a way, please share  
Photo of Mark Goodwin

Mark Goodwin

  • 82 Points 75 badge 2x thumb

Thanks Chad,

Also, can you explain why the embed is rendering to text rather than as an embed tag

Photo of Chad Brandmire

Chad Brandmire

  • 968 Points 500 badge 2x thumb
the embed tag is doing what its supposed to be doing. An embed tag is a container that displays what information it receives from a plug-in or external source. 
So in the case where you are seeing that html feedback (text), you are seeing what google docs spit back when it was sent the attachment with no access.