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.

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

6 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

Still not working for me on Safari in MacOS Big Sur. No special settings to blog plugins, and other PDFs display in the browser.

Safari Web Inspector has the following complaints when loading the preview page in theme-creator:
Unrecognized Content-Security-Policy directive 'worker-src'.
Refused to load blob:https://theme-creator.discourse.org/7b9b62c7-e782-4080-a521-04e3b06aa142 because it does not appear in the object-src directive of the Content Security Policy.

2 Likes

This would be a vast improvement to this component! Is that doable, @Johani?

2 Likes

Same issue for me on Firefox, but only after the 2nd visit :wink:
Is there a workaround for this? Manual declaration in the CSP config?

Thank you

1 Like