# 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:** 5

<div class="post-metadata">

### Author: ![Alon1](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alon1/32/197167_2.png) [@Alon1](https://meta.discourse.org/u/Alon1)
#### Post date: [January 20, 2023, 11:20pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/95 "2023-01-20T23:20:37Z")

</div>

Tried that, set `cors origins` to `https://xxxxx.s3.us-east-2.amazonaws.com`  
also set ` DISCOURSE_ENABLE_CORS: true` in the `/var/discourse/containers/app.yml`  
but it’s not working.

---

<div class="post-metadata">

### Author: ![tobiaseigen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tobiaseigen/32/539204_2.png) [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [January 21, 2023, 12:30am UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/96 "2023-01-21T00:30:45Z")

</div>

And you did a `./launcher rebuild app` after making changes to `app.yml`? You might also need to do a browser hard refresh.

---

<div class="post-metadata">

### Author: ![tobiaseigen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tobiaseigen/32/539204_2.png) [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [January 21, 2023, 10:29pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/97 "2023-01-21T22:29:09Z")

</div>

Incidentally, you might check the files section of the admin settings to see if you changed settings that are affecting this feature. I also don’t think this feature can be expected to work if you are linking to a PDF hosted on another server. I just tested this on my site and the same PDF served remotely did not show the preview.

Let us know if you find the source of the problem!

## Sample markdown of post where remote did not work but uploaded locally did work.

```plaintext
remote: 

[test remote pdf](https://jsoncompare.org/LearningContainer/SampleFiles/PDF/sample-pdf-with-images.pdf)

uploaded locally: 

[sample-pdf-with-images.pdf|attachment](upload://uOJLgHidEXnbqPRn2p6yP10ecQU.pdf) (3.8 MB)

```

## how it looks:

 ![Screenshot 2023-01-21 at 2.32.55 PM](https://global.discourse-cdn.com/meta/original/4X/9/8/6/98666abf4d372b21c303d20ba9b64e7b47b5e5bb.png)

---

<div class="post-metadata">

### Author: ![Alon1](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alon1/32/197167_2.png) [@Alon1](https://meta.discourse.org/u/Alon1)
#### Post date: [January 22, 2023, 8:56pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/98 "2023-01-22T20:56:41Z")

</div>

> [@tobiaseigen](#):
>
> And you did a `./launcher rebuild app` after making changes to `app.yml`? You might also need to do a browser hard refresh.

yes. but it didn’t work.

When you enable S3 in Discourse

 ![image](https://global.discourse-cdn.com/meta/original/4X/b/7/c/b7c5db166dbdc67cdee80e720ca606f5418b077f.png)  
Then by definition the files are stored on a different domain.  
I guess that clears the problem. But I still hope the plugin could be made to support Discourse installations that have S3 enabled.

---

<div class="post-metadata">

### Author: ![tobiaseigen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tobiaseigen/32/539204_2.png) [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [January 22, 2023, 9:08pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/99 "2023-01-22T21:08:17Z")

</div>

I am not so familiar with this configuration. Did you follow these instructions?

> [@Configure an S3 compatible object storage provider for uploads](https://meta.discourse.org/t/configure-an-s3-compatible-object-storage-provider-for-uploads/148916):
>
> information_source This topic covers how to configure some common S3 compatible Object Storage providers (S3 clones). See [Set up file and image uploads to S3](https://meta.discourse.org/t/setting-up-file-and-image-uploads-to-s3/7229) for more details about Amazon AWS S3 configuration, which is officially supported and used internally by Discourse for our hosting services. Provider Service Name Works with Discourse? [Amazon AWS](#aws-s3-2) S3 Yes [Digital Ocean](#digital-ocean-spaces-3) Spaces Yes [Linode](#linode-object-storage-4) Object Storage Yes [Google Cloud](#google-cloud-platform-storage-5) Storage Yes [Scaleway](#scaleway-object-storage-6) Object Storage Yes [Vultr](#vultr-object-storage-7) Obj…

---

<div class="post-metadata">

### Author: ![Alon1](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alon1/32/197167_2.png) [@Alon1](https://meta.discourse.org/u/Alon1)
#### Post date: [January 22, 2023, 9:15pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/100 "2023-01-22T21:15:04Z")

</div>

Yes, I have the S3 (and the related “secure media” setting) working for the last couple of years without a problem.  
It is only the Inline PDF component that doesn’t work with this setting.

for reference, even setting app.yml like that:

> DISCOURSE\_ENABLE\_CORS: true  
> DISCOURSE\_CORS\_ORIGIN: ‘\*’

doesn’t help

---

<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: [January 23, 2023, 9:12am UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/101 "2023-01-23T09:12:23Z")

</div>

> [@Alon1](#):
>
> Yes, I have the S3 (and the related “secure media” setting) working for the last couple of years without a problem.

I ran into this exact problem too, and ended up reversing my S3 uploads just to get this TC to work as it is high value for us:

> [@Inline PDF Previews](https://meta.discourse.org/t/inline-pdf-previews/157649/33):
>
> 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 sk…

I really think that as this is #official and S3 uploads are encouraged, this should be looked at to see if it can be made to work with S3 somehow. It could be that pdfs are specifically excluded from S3 uploads, but that would suck as some are enormous!

---

<div class="post-metadata">

### Author: ![Alon1](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alon1/32/197167_2.png) [@Alon1](https://meta.discourse.org/u/Alon1)
#### Post date: [January 23, 2023, 10:42pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/103 "2023-01-23T22:42:46Z")

</div>

> [@nathankershaw](#):
>
> I really think that as this is #official and S3 uploads are encouraged, this should be looked at to see if it can be made to work with S3 somehow

I don’t think anyone would disagree.  
I’m guessing it’s about awareness and priorities.  
At least regarding the “awareness” perhaps @Johani the OP could add a small note in the topic of this discussion that the inline PDF component doesn’t work with S3 enabled.  
It would save others the time of troubleshooting and raise awareness to the issue.

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [January 24, 2023, 2:47pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/106 "2023-01-24T14:47:48Z")

</div>

There’s a bit of info about S3 in these posts I’ve fished out of the auto-timer if they’re any help?

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

> [@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, 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: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [January 24, 2023, 3:50pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/107 "2023-01-24T15:50:28Z")

</div>

A post was merged into an existing topic: [Theme-Component Topics project](https://meta.discourse.org/t/theme-component-topics-project/252740/2)

---

<div class="post-metadata">

### Author: ![Alon1](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alon1/32/197167_2.png) [@Alon1](https://meta.discourse.org/u/Alon1)
#### Post date: [January 24, 2023, 6:56pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/108 "2023-01-24T18:56:21Z")

</div>

Yep, that works 😃  
For reference if anyone else needs this:

1. go to AWS console buckets `https://s3.console.aws.amazon.com/s3/buckets` and select the bucket that was used for your Discourse installation

2. Choose the Permissions tab  
 ![image](https://global.discourse-cdn.com/meta/original/4X/9/1/d/91d39402baafcfde4f6096802d430a914f074334.png)

3. Scroll down to “Cross-origin resource sharing (CORS)” and write:

```json
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "https://my-site.com"
        ],
        "ExposeHeaders": []
    }
]

```

Should look like this:

 ![image](https://global.discourse-cdn.com/meta/original/4X/1/f/8/1f8105823845d1db8c4295d8958f58b30f7c1af7.png)

---

<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: [January 24, 2023, 7:24pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/109 "2023-01-24T19:24:24Z")

</div>

I wish I’d found that while I was still on S3 uploads!!

Might need to revisit it now. @JammyDodger, I wonder if that stuff should noted on both the S3 and this OP so others don’t trip up on this.

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [January 24, 2023, 7:30pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/110 "2023-01-24T19:30:14Z")

</div>

> [@nathankershaw](#):
>
> Might need to revisit it now. @JammyDodger, I wonder if that stuff should noted on both the S3 and this OP so others don’t trip up on this.

Absolutely. 👍 I was just waiting for some confirmation that it worked before thinking about how best to make an edit. 🙂

---

<div class="post-metadata">

### Author: ![Ralf\_Stockmann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ralf_stockmann/32/505867_2.png) [@Ralf\_Stockmann](https://meta.discourse.org/u/Ralf_Stockmann)
#### Post date: [January 30, 2023, 2:49pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/111 "2023-01-30T14:49:01Z")

</div>

Two ideas, adressing the same problem: the viewport of discourse is rather narrow, so most PDFs are too small to read inline. To adress this, we could

a) make the PDF-iframe resizable? I tried this with CSS already, but no no avail - the underlaying grid seems to be in the way  
b) offer a second link “open in new tab” besides the download link? I am very keen on not downloading to much stuff from our forum.

---

<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: [January 31, 2023, 1:02am UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/112 "2023-01-31T01:02:14Z")

</div>

> [@Ralf\_Stockmann](#):
>
> b) offer a second link “open in new tab” besides the download link? I am very keen on not downloading to much stuff from our forum.

This would be a marked improvement! And shouldn’t be too hard to add I think. Might have a go at a PR for this if I get the space over the next few days.

---

<div class="post-metadata">

### Author: ![tobiaseigen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tobiaseigen/32/539204_2.png) [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [January 31, 2023, 1:46am UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/113 "2023-01-31T01:46:30Z")

</div>

I think (b) is already provided as an option, eg inline vs open in new tab. Maybe a third option to let users see inline and open in new tab? I like this idea too.

(a) may be difficult given how hard it can be to get things to look right in a post.

---

<div class="post-metadata">

### Author: ![Alon1](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alon1/32/197167_2.png) [@Alon1](https://meta.discourse.org/u/Alon1)
#### Post date: [March 1, 2023, 3:09pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/114 "2023-03-01T15:09:41Z")

</div>

I would be happy to see an expand button

 ![expand](https://global.discourse-cdn.com/meta/original/4X/6/b/8/6b8dd12fdc75b5e8a4c9f15dfd6ec04f314d78ad.png) on the tool bar that simply shows the PDF full screen instead of inline.

---

<div class="post-metadata">

### Author: ![denvergeeks](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denvergeeks/32/327671_2.png) [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [March 2, 2023, 3:32am UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/115 "2023-03-02T03:32:58Z")

</div>

@Ralf_Stockmann and @Alon1 have you tried…

> [@IFrame Lightboxes](https://meta.discourse.org/t/iframe-lightboxes/89853):
>
> This is a theme component that adds the ability to open iFrames in lightboxes. Samples This component adds an “expand” button on top of the iframes you enable it on. Clicking the button will open the iframe in fullscreen in a lightbox. Clicking either the dark area around the iframe or the x at the top right corner closes the lightbox. The same way it works for default image lightboxes. Settings There’s only one setting. You add the domains…

Also, on my Discourse I use this method…

### Embed a PDF from Google Drive

(This is my preferred method so **PDFs** in iFrames are responsive - other methods mostly fail at being cross-browser responsive.)

1. Share
2. Copy Share Link
3. Open Share Link in a New Tab
4. Click the 3 Vertical Dots in the Top Right Corner
5. Select Embed Item
6. Copy the Displayed iFrame Code
7. Paste it in the Discourse Editor

> A Test PDF on Google Drive is embedded here below which you can [\<\< Download Here \>\>](https://drive.google.com/file/d/1KQ-jn7R0NmZxw955QaPu3lvLFh5zpnDe/view?usp=sharing)

```plaintext
<iframe src="https://drive.google.com/file/d/1KQ-jn7R0NmZxw955QaPu3lvLFh5zpnDe/preview" width="640" height="480" allow="autoplay"></iframe>

```

This is what it looks like… (which you can also try out live [HERE](https://noobish.me/t/features-plugins-and-tools/165) on my site)

 ![image](https://global.discourse-cdn.com/meta/original/4X/7/2/1/721bafc1d705a2bafd3a54c57f1451afda75df9a.png)

---

<div class="post-metadata">

### Author: ![Alon1](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alon1/32/197167_2.png) [@Alon1](https://meta.discourse.org/u/Alon1)
#### Post date: [March 2, 2023, 1:49pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/116 "2023-03-02T13:49:35Z")

</div>

That’s great!  
Simply (1) installing IFrame Lightboxes theme-component and (2) adding my own website url to the list of “iframe origin domains” in the component settings, works! It adds the expand button right above the right corner of the PDF inline

 ![image](https://global.discourse-cdn.com/meta/original/4X/2/4/2/242103819bca1fab1fc1e3ddc247fb1783abb1c0.png)

Right out of the box 🙂

---

<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: [March 5, 2023, 12:38pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/117 "2023-03-05T12:38:19Z")

</div>

Since I was still not able to open PDFs in a new tab I wrote a small plugin to serve all local PDFs with `content-disposition: inline`:

[https://github.com/thoka/discourse-send-pdf-inline](https://github.com/thoka/discourse-send-pdf-inline)

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

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