Inline pdf previews

This is a desktop-only theme component that will allow you to create previews for pdf attachments.

Repository link
https://github.com/discourse-com/discourse-pdf-previews

Preview:
https://theme-creator.discourse.org/theme/Johani/pdf-previews

Samples

before

after

Notes

Like I mentioned above, this component will only work on desktop. There’s very little benefit to showing the previews on mobile since everything will be so small and very hard to read.

This component uses the native browser implementation to render the pdfs, so the results will look different on different browsers.

Also note that this respects the user’s browser preferences for rendering pdfs inline. So, if the user does not want to allow pdfs to render inline, they will see something like this on Safari for example

but that can be easily fixed if they trust your site.

Also, please note that pdf uploads are not allowed by default in Discourse. If you want to allow your users to upload pdf file, then you’ll need add that extension to either the

authorized_extensions

If you want all of your users to be able to upload pdfs, or

authorized_extensions_for_staff

if you want to limit that to staff members.

How do I use it?

  1. install the component
  2. allow pdf uploads
  3. refresh the page
  4. upload a pdf

That’s it. The rest should work automatigcally.

How do I install this theme component?

Follow the theme installation guide and add the theme component to your active themes.

If you’re new to Discourse themes, you can learn more about them here.

37 Likes

Hi @Johani,

On the below page the pdf is not displaying, could it be a conflict with other plugins ?

I’m hosting my uploads and images on S3, and the preview is blocked by a “CORS policy: No ‘Access-Control-Allow-Origin’ header is present”.

Below is what Chrome console says:

Access to fetch at 'https://travelmassive-discourse-cdn.s3.dualstack.us-west-1.amazonaws.com/original/2X/b/b578f6364592121964e6a2fd4969e5c1222bd909.pdf' (redirected from 'https://lounge.travelmassive.com/uploads/short-url/pTnA3r043WfhDK8HSdPQrtNn8Lf.pdf') from origin 'https://lounge.travelmassive.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Update

I was able to fix this by adding the following CORS policy in my S3 bucket configuration.

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>https://mydiscourse.url/</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
   <AllowedHeader>*</AllowedHeader>
   <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
 </CORSRule>
</CORSConfiguration>
2 Likes

Yup, I’m seeing the same problem on the theme-creator preview and my personal site :bug:

3 Likes

It’s necessary to add, that if you see this text in the error message from origin 'https://lounge.travelmassive.com' has been where your domain is without slash / at the end, then in the CORS configuration you should also add your domain without slash at the end like this:
https://mydiscourse.url

1 Like

I noticed that your uploads are on AWS so, the issue is probably CORS related (the component is not active on your site for me to confirm). See the post below yours.

thanks for sharing that!

Please note that this issue will only affect self-hosters that have set up something like S3. Self-hosters that are not using S3 will not run into this issue. Customers hosted by CDCK will also not need to worry about that since they already have that set up.

That said, CORS configuration is a bit outside of the scope of this topic. If your uploads bucket does not allow your own domain access, then that needs to be fixed regardless since there might be some other issues caused by that.

I’m a little bit unsure what happened here. Both cases seem to be working for me everytime I try. We can just chalk it up to a transitory network issue but please let me know if you see it again :+1:

I pushed a tiny update to this component that should improve the loading perception, there’s now a theme-color based placeholder instead of the default browser Iframe styles. It only shows up while the file is loading so 99% of the time, you won’t even notice it.

Given that most PDFs will load instantly I didn’t feel like adding a spinner would be worth it.

9 Likes

hi,

can we adapt Document Cloud View SDK on this component?

Document Cloud View SDK works on mobile also.

Hey :wave:

Unfortunately the answer is no.

This component uses the native browser implementation to render PDFs that have been uploaded to Discourse. So, it won’t work for external PDFs and there are no plans to add a 3rd-party library like DocumentCloud’s Document Viewer.

If you want PDFs to render in posts, then you’d need to upload them to your post as regular uploads.

5 Likes

Looks like it’s broken with latest.

_ember_jquery-1ed3f3559e6f967733b4088aa729ff7039dff2c09c5a5f787a214b016f58aabc.js:4069 Uncaught TypeError: Cannot set property 'nodeValue' of null
    at 7bed10402778921419d3af65b2a307cf40cf4959.js?__ws=x.staging.literatehosting.com:62
    at Array.forEach (<anonymous>)
    at api.decorateCookedElement.id (7bed10402778921419d3af65b2a307cf40cf4959.js?__ws=x.staging.literatehosting.com:57)
    at _application-a0758d4c43b8a762593300abc445f14ec227618ffde628ea1ef0c1ac9e04d2b5.js:76022
    at Array.forEach (<anonymous>)
    at h.value (_application-a0758d4c43b8a762593300abc445f14ec227618ffde628ea1ef0c1ac9e04d2b5.js:76021)
    at h.value (_application-a0758d4c43b8a762593300abc445f14ec227618ffde628ea1ef0c1ac9e04d2b5.js:76012)
    at e (_vendor-465f30afbf27352b1a2f4a1691ce8e3b7fc8b313d565f88d3b0ae3fcee420a3d.js:20013)
    at e (_vendor-465f30afbf27352b1a2f4a1691ce8e3b7fc8b313d565f88d3b0ae3fcee420a3d.js:20033)
    at e (_vendor-465f30afbf27352b1a2f4a1691ce8e3b7fc8b313d565f88d3b0ae3fcee420a3d.js:20033)
    at e (_vendor-465f30afbf27352b1a2f4a1691ce8e3b7fc8b313d565f88d3b0ae3fcee420a3d.js:20033)
    at e (_vendor-465f30afbf27352b1a2f4a1691ce8e3b7fc8b313d565f88d3b0ae3fcee420a3d.js:20033)
    at e (_vendor-465f30afbf27352b1a2f4a1691ce8e3b7fc8b313d565f88d3b0ae3fcee420a3d.js:20033)
    at Object.e [as render] (_vendor-465f30afbf27352b1a2f4a1691ce8e3b7fc8b313d565f88d3b0ae3fcee420a3d.js:20033)
    at _vendor-465f30afbf27352b1a2f4a1691ce8e3b7fc8b313d565f88d3b0ae3fcee420a3d.js:20234
    at t.exports (_vendor-465f30afbf27352b1a2f4a1691ce8e3b7fc8b313d565f88d3b0ae3fcee420a3d.js:20154)
    at _vendor-465f30afbf27352b1a2f4a1691ce8e3b7fc8b313d565f88d3b0ae3fcee420a3d.js:20342
    at Object.i [as patch] (_vendor-465f30afbf27352b1a2f4a1691ce8e3b7fc8b313d565f88d3b0ae3fcee420a3d.js:20317)
    at t.exports (_vendor-465f30afbf27352b1a2f4a1691ce8e3b7fc8b313d565f88d3b0ae3fcee420a3d.js:20163)
    at _vendor-465f30afbf27352b1a2f4a1691ce8e3b7fc8b313d565f88d3b0ae3fcee420a3d.js:20342
    at Object.i [as patch] (_vendor-465f30afbf27352b1a2f4a1691ce8e3b7fc8b313d565f88d3b0ae3fcee420a3d.js:20317)
    at e (_vendor-465f30afbf27352b1a2f4a1691ce8e3b7fc8b313d565f88d3b0ae3fcee420a3d.js:20298)
    at t.rerenderWidget (_application-a0758d4c43b8a762593300abc445f14ec227618ffde628ea1ef0c1ac9e04d2b5.js:56245)
    at t.invoke (_ember_jquery-1ed3f3559e6f967733b4088aa729ff7039dff2c09c5a5f787a214b016f58aabc.js:66550)
    at e.t.flush (_ember_jquery-1ed3f3559e6f967733b4088aa729ff7039dff2c09c5a5f787a214b016f58aabc.js:66442)
    at e.t.flush (_ember_jquery-1ed3f3559e6f967733b4088aa729ff7039dff2c09c5a5f787a214b016f58aabc.js:66646)
    at e.t._end (_ember_jquery-1ed3f3559e6f967733b4088aa729ff7039dff2c09c5a5f787a214b016f58aabc.js:67222)
    at e.t.end (_ember_jquery-1ed3f3559e6f967733b4088aa729ff7039dff2c09c5a5f787a214b016f58aabc.js:66908)
    at e.t._run (_ember_jquery-1ed3f3559e6f967733b4088aa729ff7039dff2c09c5a5f787a214b016f58aabc.js:67277)
    at e.t._join (_ember_jquery-1ed3f3559e6f967733b4088aa729ff7039dff2c09c5a5f787a214b016f58aabc.js:67251)
    at e.t.join (_ember_jquery-1ed3f3559e6f967733b4088aa729ff7039dff2c09c5a5f787a214b016f58aabc.js:66968)
    at f (_ember_jquery-1ed3f3559e6f967733b4088aa729ff7039dff2c09c5a5f787a214b016f58aabc.js:53760)
    at HTMLDocument.<anonymous> (_ember_jquery-1ed3f3559e6f967733b4088aa729ff7039dff2c09c5a5f787a214b016f58aabc.js:53864)
5 Likes

The issue here was that posts generated via the API have a slightly different markup which caused the component to fail. I pushed a fix for it here

Thanks for reporting the issue @pfaffman :+1:

8 Likes

Would it be possible to make PDF Preview suppressable by prepending a space before the upload link, like with oneboxing? Sometimes you want a list of documents and not previews. Sometimes you want a preview.

5 Likes

I’m on Safari on MacOS Catalina, and I don’t have anything disabling in-browser PDF display—for instance, http://www.orimi.com/pdf-test.pdf displays fine. But I’m still getting the “Blocked Plug-in” window/message when I view the preview in theme-creator.

Site-specific settings in Safari prefs aren’t any different than other websites.

Is that happening for anyone else?

1 Like