# Inline PDF Previews

**URL:** https://meta.discourse.org/t/inline-pdf-previews/157649
**Category:** Theme component
**Tags:** official, desktop, pdf-previews
**Created:** [July 13, 2020, 9:18pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649 "2020-07-13T21:18:10Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [July 13, 2020, 9:18pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/1 "2020-07-13T21:18:10Z")

</div>

| | | |
| --- | --- | --- |
| :discourse2: | **Summary** | **Inline PDF Previews** is a desktop-only theme component that will allow you to create previews for pdf attachments. |
| 👓 | **Preview** | [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/inline-pdf-previews) (desktop only) |
| 🛠 | **Repository Link** | [https://github.com/discourse/discourse-pdf-previews](https://github.com/discourse/discourse-pdf-previews) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

Install this theme component

> [@](#):
>
> :discourse2: As this is an #official theme component maintained by the Discourse team, #Support, #Contribute > Bug, #Contribute > UX, and #Contribute > Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started. 👍
> 
> [❓&nbsp; **Support**](https://meta.discourse.org/new-topic?category_id=6&tags=pdf-previews "Ask for support on configuring and using Inline PDF Previews") [🐛&nbsp; **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=pdf-previews "A bug report means something is broken, preventing normal/typical use of the theme component") [👀&nbsp; **UX**](https://meta.discourse.org/new-topic?category_id=9&tags=pdf-previews "Discussion about the user interface of Inline PDF Previews, and how features are presented (including language and UI elements)") [💡&nbsp; **Feature**](https://meta.discourse.org/new-topic?category_id=2&tags=pdf-previews "Discussion about how existing Inline PDF Previews features can be improved or enhanced, and how proposed new features could work")

### Features

before

 ![pdf-previews-before](https://global.discourse-cdn.com/meta/original/3X/4/f/4f67586b16f2b465b152258899342c3fb6ba66eb.png)

after

 ![pdf-previews-after](https://global.discourse-cdn.com/meta/original/3X/b/e/bea05154131debc87bd8ff5d25085562695b4530.png)

As 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, 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.

> ℹ If using S3 you may also need to update your CORS policy. Please see post below: [Inline PDF Previews - #106 by JammyDodger](https://meta.discourse.org/t/inline-pdf-previews/157649/106)

#### 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 automatically.

### Settings

| Name | Description |
| --- | --- |
| preview mode | **Inline:** PDF attachments will be rendered inline within posts  
  
**New Tab:** PDF attachment links will take the user to a new tab where the PDF will be rendered |

### Additional Features

If you want an individual PDF to _not_ render inline, you can simply add a space before the filename - e.g.:

#### This will display inline

```plaintext
[sample-pdf.pdf|attachment](upload://usvbcKiQSWqA3w10gnf5PtydiXR.pdf) (82.9 KB)

```

#### This _won’t_ display inline

```plaintext
[sample-pdf.pdf|attachment](upload://usvbcKiQSWqA3w10gnf5PtydiXR.pdf) (82.9 KB)

```

  

> :discourse2: **Hosted by us?** Theme components are available to use on our Standard, Business, and Enterprise plans.

> Last edited by @nathank 2024-09-11T23:30:45Z
> 
> > **Check document**
> >
> > Perform check on document:

---

<div class="post-metadata">

### Author: ![travelvc](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/travelvc/32/82090_2.png) [@travelvc](https://meta.discourse.org/u/travelvc)
#### Post date: [July 29, 2020, 12:01am UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/3 "2020-07-29T00:01:31Z")

</div>

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

 ![Screen Shot 2020-07-29 at 9.58.46 am](https://global.discourse-cdn.com/meta/original/3X/d/e/dec1cbee1cbfdd175db68eacebb3137b6f318dc6.png)

Below is what Chrome console says:

```console
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.

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

```

---

<div class="post-metadata">

### Author: ![Ed\_Bobkov](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ed_bobkov/32/200014_2.png) [@Ed\_Bobkov](https://meta.discourse.org/u/Ed_Bobkov)
#### Post date: [August 4, 2020, 8:15am UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/6 "2020-08-04T08:15:42Z")

</div>

> [@travelvc](#):
>
> ` <AllowedOrigin>https://mydiscourse.url/</AllowedOrigin>`

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](https://mydiscourse.url)**

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [August 6, 2020, 8:40am UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/7 "2020-08-06T08:40:52Z")

</div>

> [@Jeremie\_Leroy](#):
>
> could it be a conflict with other plugins ?

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.

> [@travelvc](#):
>
> I was able to fix this by adding the following CORS policy in my S3 bucket configuration.

> [@Ed\_Bobkov](#):
>
> 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

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.

> [@rishabh](#):
>
> I’m seeing the same problem

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 👍

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.

 ![iframe preview placeholder](https://global.discourse-cdn.com/meta/original/3X/8/0/80ed86fa35e2d90473b62f7e2d6d9c8b434bed84.png)

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

---

<div class="post-metadata">

### Author: ![pacharanero](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pacharanero/32/500583_2.png) [@pacharanero](https://meta.discourse.org/u/pacharanero)
#### Post date: [September 16, 2020, 10:02am UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/15 "2020-09-16T10:02:24Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![paulrudy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/paulrudy/32/259901_2.png) [@paulrudy](https://meta.discourse.org/u/paulrudy)
#### Post date: [September 23, 2020, 8:23pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/17 "2020-09-23T20:23:56Z")

</div>

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](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?

---

<div class="post-metadata">

### Author: ![paulrudy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/paulrudy/32/259901_2.png) [@paulrudy](https://meta.discourse.org/u/paulrudy)
#### Post date: [December 11, 2020, 5:30pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/21 "2020-12-11T17:30:44Z")

</div>

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

---

<div class="post-metadata">

### Author: ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [December 12, 2020, 9:35pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/22 "2020-12-12T21:35:42Z")

</div>

> [@pacharanero](#):
>
> Would it be possible to make PDF Preview suppressable by prepending a space before the upload link, like with oneboxing?

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

---

<div class="post-metadata">

### Author: ![Freez](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/freez/32/155627_2.png) [@Freez](https://meta.discourse.org/u/Freez)
#### Post date: [December 15, 2020, 2:21pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/23 "2020-12-15T14:21:48Z")

</div>

> [@paulrudy](#):
>
> 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.`

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

Thank you

---

<div class="post-metadata">

### Author: ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [February 4, 2021, 7:29am UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/24 "2021-02-04T07:29:10Z")

</div>

This has stopped working on my site. I get a big black box instead of the PDF preview:

 ![image](https://global.discourse-cdn.com/meta/original/3X/4/9/4961a91ab74a2594199e9d85bb5207e30d23181d.png)

Disabling plugins via [Safe Mode](https://meta.discourse.org/t/53504?silent=true) makes no difference, nor does removing every other Theme component.

It has happened after moving image and file uploads to S3, which might be the culprit. I hope not, because they can’t be moved back easily!

I’m stumped. Shame, as it is a great component. Any suggestions?

---

<div class="post-metadata">

### Author: ![keven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/keven/32/111884_2.png) [@keven](https://meta.discourse.org/u/keven)
#### Post date: [March 2, 2021, 1:26am UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/25 "2021-03-02T01:26:17Z")

</div>

I am seeing the same behaviour with s3 uploads on.

---

<div class="post-metadata">

### Author: ![Benjamin\_D](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/benjamin_d/32/277831_2.png) [@Benjamin\_D](https://meta.discourse.org/u/Benjamin_D)
#### Post date: [March 2, 2021, 6:48am UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/26 "2021-03-02T06:48:04Z")

</div>

Are you still able to download the pdf ?  
Still working for me (s3 + secure media and no cdn) 🤔

---

<div class="post-metadata">

### Author: ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [March 2, 2021, 8:51am UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/27 "2021-03-02T08:51:05Z")

</div>

> [@Benjamin\_D](#):
>
> Are you still able to download the pdf ?

Yes, we are. Have the same setup as you (I think).

---

<div class="post-metadata">

### Author: ![Benjamin\_D](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/benjamin_d/32/277831_2.png) [@Benjamin\_D](https://meta.discourse.org/u/Benjamin_D)
#### Post date: [March 2, 2021, 10:01am UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/28 "2021-03-02T10:01:07Z")

</div>

🤔

- my links in the messages are in the form of `domain/secure-media-uploads/meta/original/...`
- but in the console/network I can see that the actual downloads come from the bucket  
Do you see the amz credential ?

if not maybe this coud help ?

> [@Secure Uploads](https://meta.discourse.org/t/secure-uploads/140017/1):
>
> If you want all uploads retroactively to be analysed and possibly marked as secure, run the `uploads:secure_upload_analyse_and_update` rake task.

I also remember that something weird was happening when I tried to move a post from categories (or was it a copy/paste?) it finally worked when I re-uploaded the file.

---

<div class="post-metadata">

### Author: ![reclaimedpress](https://avatars.discourse-cdn.com/v4/letter/r/91b2a8/32.png) [@reclaimedpress](https://meta.discourse.org/u/reclaimedpress)
#### Post date: [March 4, 2021, 3:09pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/29 "2021-03-04T15:09:58Z")

</div>

I am experiencing this same behavior on a fresh discourse installation and a fresh PDF attachment.

---

<div class="post-metadata">

### Author: ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [April 8, 2021, 5:20am UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/30 "2021-04-08T05:20:08Z")

</div>

> [@Benjamin\_D](#):
>
> if not maybe this coud help ?

Thanks @Benjamin_D. Turns out I don’t have secure uploads enabled, and my links all look nice and work fine, such as this one:

[The HiNZ eHealth Forum - trusted online digital health discussion](https://healthforum.nz/uploads/short-url/jyY18nDviITy5inQ3Rw7xQp0cyS.pdf)

So I’m stumped - especially as to why it works in two forums I run and not the other - S3 being the only difference. And that you have it working with S3. I’m really confused.

---

<div class="post-metadata">

### Author: ![hollosch](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hollosch/32/216268_2.png) [@hollosch](https://meta.discourse.org/u/hollosch)
#### Post date: [May 1, 2021, 9:28pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/31 "2021-05-01T21:28:49Z")

</div>

After updating to the latest version of discourse, the pdf-attachements are no longer displayed. What could be the problem ?

---

<div class="post-metadata">

### Author: ![omarfilip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/omarfilip/32/208019_2.png) [@omarfilip](https://meta.discourse.org/u/omarfilip)
#### Post date: [May 1, 2021, 11:17pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/32 "2021-05-01T23:17:07Z")

</div>

It may be a conflict with another component or theme. It’s working as expected for me. Start by disabling other components and try using the default theme if yours is different. Same with plugins.

---

<div class="post-metadata">

### Author: ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [May 5, 2021, 12:48pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/33 "2021-05-05T12:48:33Z")

</div>

> [@nathank](#):
>
> So I’m stumped - especially as to why it works in two forums I run and not the other - S3 being the only difference. And that you have it working with S3. I’m really confused.

Ok - I’ve made progress. Disabling S3 uploads fixes it for new uploads. But I’m left with a S3 / local mess if I go down that road!

If could be that I am not using the CDN thingo (CloudFront) which throws up the annoying errors on the admin page. I’ll have a crack setting that up and see if that works.

_later_ - nope, a CDN makes no difference.

_much later_ - have [removed S3 uploads successfully](https://meta.discourse.org/t/stop-using-amazon-s3-for-uploads/107286/41) (with a bit of sweat) so all good now.

Now, I’m keen to improve it! Is any clever person with the skills interested in giving this a crack?

> [@pacharanero](#):
>
> 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.

---

<div class="post-metadata">

### Author: ![thoka](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thoka/32/115652_2.png) [@thoka](https://meta.discourse.org/u/thoka)
#### Post date: [October 10, 2021, 3:46am UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/34 "2021-10-10T03:46:56Z")

</div>

I am searching for a plugin, which allows to open the pdf in a new tab.  
Current behavior of my discourse is to allow download only.  
Would that be possible with a similar theme ?

[Next page](https://meta.discourse.org/t/inline-pdf-previews/157649.md?page=2)
