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

<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: [October 20, 2021, 9:10pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/55 "2021-10-20T21:10:33Z")

</div>

Excellent! Thanks @Johani. I can confirm it works in all 3 browsers now.

---

<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: [October 22, 2021, 1:12am UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/56 "2021-10-22T01:12:27Z")

</div>

Fantastic - these are solid improvements and clearly a lot of work to achieve. Thanks for listening to us slightly annoying co-conspirators in the self-hosted world!

Does the Component now work with S3 uploads?

---

<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: [October 22, 2021, 12:17pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/57 "2021-10-22T12:17:14Z")

</div>

> [@nathank](#):
>
> Does the Component now work with S3 uploads?

I haven’t tried it, but It should work if your bucket is configured correctly. This component makes a [request](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) to load the PDF

[discourse-pdf-previews/javascripts/discourse/initializers/initialize-for-pdf-preview.js at main · discourse/discourse-pdf-previews · GitHub](https://github.com/discourse/discourse-pdf-previews/blob/main/javascripts/discourse/initializers/initialize-for-pdf-preview.js#L78)

These types of requests made in JavaScript are blocked if the origin is not allowed access to the file. You then end up with a [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) error. If you check the console, you’ll probably see something along the lines of this.

![image](https://global.discourse-cdn.com/meta/original/3X/c/a/caf34fefc1204ed72c8119e6c3344d40b03d4df3.png)

There’s not much the component can do about this. It all has to be handled in your S3 configuration. The origin - your Discourse domain - must be allowed to make such requests to avoid CORS issues.

---

<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: [October 28, 2021, 9:52pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/58 "2021-10-28T21:52:16Z")

</div>

Thanks! I’ll bravely take the plunge back to S3 shortly.

### Another suggestion: tab when space before filename

What I want is for the pdf to be inline by default, and to open in a new tab if the space is put in the filename. This gives authors the choice per pdf of inline vs tab rather than per component.

Perhaps the component setting should instead be “What default behaviour do you want?” and if a space is put in you get the other.

Or alternatively you could ask what the space should do (inline / tab / download).

---

<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: [November 1, 2021, 7:07pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/59 "2021-11-01T19:07:41Z")

</div>

Aargh! Chrome is again showing only gray boxes. FF and Safari are OK.

---

<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: [November 2, 2021, 7:30pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/60 "2021-11-02T19:30:55Z")

</div>

Is this theme component sending the pdf to external interpreter?  
I have “secure media” enabled because i want to avoid files being loaded by an external service..

---

<div class="post-metadata">

### Author: ![sharewoodsDavid](https://avatars.discourse-cdn.com/v4/letter/s/5e9695/32.png) [@sharewoodsDavid](https://meta.discourse.org/u/sharewoodsDavid)
#### Post date: [November 4, 2021, 6:52pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/61 "2021-11-04T18:52:52Z")

</div>

I found out that this is because of the following code:

```plaintext
<a class="attachment pdf-attachment" href="...pdf">doc.pdf
  <iframe src="blob:..." height="500" loading="lazy" class="pdf-preview">
  </iframe>
</a>

```

If you replace the above code with the following:

```plaintext
<a class="attachment pdf-attachment" href="...pdf">doc.pdf</a>
<iframe src="blob:..." height="500" loading="lazy" class="pdf-preview"></iframe>

```

It will work  
But I’m not sure how to fix this in the existing code.

---

<div class="post-metadata">

### Author: ![sharewoodsDavid](https://avatars.discourse-cdn.com/v4/letter/s/5e9695/32.png) [@sharewoodsDavid](https://meta.discourse.org/u/sharewoodsDavid)
#### Post date: [November 4, 2021, 7:02pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/62 "2021-11-04T19:02:28Z")

</div>

@Johani  
The error is associated with the following code, line 34 - 41:

```plaintext
        const setUpPreviewType = (pdf) => {
          if (previewMode === "Inline") {
            const preview = createPreviewElement();
            pdf.classList.add("pdf-attachment");
            pdf.append(preview);

            return preview;
          }

```

---

<div class="post-metadata">

### Author: ![sharewoodsDavid](https://avatars.discourse-cdn.com/v4/letter/s/5e9695/32.png) [@sharewoodsDavid](https://meta.discourse.org/u/sharewoodsDavid)
#### Post date: [November 4, 2021, 7:19pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/63 "2021-11-04T19:19:46Z")

</div>

This solution seems to work for all browsers.

---

<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: [November 4, 2021, 9:50pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/64 "2021-11-04T21:50:51Z")

</div>

> [@sharewoodsDavid](#):
>
> The error is associated with the following code, line 34 - 41:
> 
> ```plaintext
> const setUpPreviewType = (pdf) => {
> if (previewMode === "Inline") {
> const preview = createPreviewElement();
> pdf.classList.add("pdf-attachment");
> pdf.append(preview);
> 
> ```

`pdf.parentNode.append(preview);` seems to do the trick (but in case of multiple pdfs, previews show below all links, not below each one)

---

<div class="post-metadata">

### Author: ![sharewoodsDavid](https://avatars.discourse-cdn.com/v4/letter/s/5e9695/32.png) [@sharewoodsDavid](https://meta.discourse.org/u/sharewoodsDavid)
#### Post date: [November 5, 2021, 11:16am UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/65 "2021-11-05T11:16:18Z")

</div>

But if the parentNode is the paragraph, than this shouldn’t be an issue because the link and the iframe will be inside the paragraph tag.

So to bypass this issue you can just add a newline between the attachments:

```plaintext
[doc1.pdf|attachment](...)

[doc2.pdf|attachment](...)

```

and with your solution it will properly display the PDF preview on Chrome as well

---

<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: [November 5, 2021, 4:16pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/66 "2021-11-05T16:16:57Z")

</div>

I just pushed some changes.

[https://github.com/discourse/discourse-pdf-previews/pull/6](https://github.com/discourse/discourse-pdf-previews/pull/6)

> [@nathank](#):
>
> What I want is for the pdf to be inline by default, and to open in a new tab if the space is put in the filename.

Yeah, that makes more sense than ignoring the file. Here’s how things will work after the update.

1. If you set the setting to “New Tab,” the component won’t attach any preview in posts. If you click the link, it will open the PDF in a new tab.

2. If you set the setting to “Inline,” the component will attach a preview in the post to all PDFs by default. If the file name starts with a space, it won’t attach the preview, but clicking the link will open the PDF in a new tab instead of downloading it.

> [@omarfilip](#):
>
> Chrome is again showing only gray boxes

> [@sharewoodsDavid](#):
>
> If you replace the above code with the following:
> 
> ```plaintext
> <a class="attachment pdf-attachment" href="...pdf">doc.pdf</a>
> <iframe src="blob:..." height="500" loading="lazy" class="pdf-preview"></iframe>
> 
> ```
> 
> It will work

Thanks for the debugging and details @sharewoodsDavid. It turns out that `<iframe>` tags inside `<a>` tags fails to validate

> The element `iframe` must not appear as a descendant of the `a` element

So, your fix is on point. I made that change in the PR above.

> [@Benjamin\_D](#):
>
> `pdf.parentNode.append(preview);` seems to do the trick

If you want to add an element after another element, you can use [after()](https://developer.mozilla.org/en-US/docs/Web/API/Element/after) like so

```javascript
someElement.after(newElement)

```

If you want to add an element before another element, you can use [insertBefore()](https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore) like so

```javascript
// parentNode: the parent of the element you want to insert before
// newNode: the element you want to insert
// referenceNode: the element you want to insert before

parentNode.insertBefore(newNode, referenceNode)

```

> [@Alon1](#):
>
> Is this theme component sending the pdf to external interpreter?

No. There are no external services involved in this. Here’s how it works.

1. user visits a post with a PDF attachment
2. user’s browser requests the attachment
3. server sends it to the user’s browser
4. the user’s browser reads it using the built-in PDF viewer

That’s it.

---

<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: [November 5, 2021, 4:32pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/67 "2021-11-05T16:32:29Z")

</div>

Perfect - thanks @Johani. Confirming it works in Chrome, FF, and Safari. 👍

---

<div class="post-metadata">

### Author: ![spamless](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/spamless/32/255876_2.png) [@spamless](https://meta.discourse.org/u/spamless)
#### Post date: [May 1, 2022, 9:36pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/68 "2022-05-01T21:36:24Z")

</div>

> [@Johani](#):
>
> `https://github.com/discourse/discourse-pdf-previews`

This is great! Thank you so much. I’ve got it installed and working! Just what I was looking for.

---

<div class="post-metadata">

### Author: ![kbpierson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kbpierson/32/266795_2.png) [@kbpierson](https://meta.discourse.org/u/kbpierson)
#### Post date: [July 13, 2022, 1:21pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/69 "2022-07-13T13:21:50Z")

</div>

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

Will this be retroactive to pdfs already posted in the forum?

---

<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: [July 13, 2022, 1:37pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/70 "2022-07-13T13:37:29Z")

</div>

I have just tested on my test site, and it appears it works for the existing ones too, without needing to ‘rebuild html’. 👍

---

<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 18, 2023, 6:21pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/71 "2023-01-18T18:21:17Z")

</div>

I saw an update in the source last week so I’m guessing this component is alive. But sadly it has never worked for me on any browser. Is it because of secure “media setting” maybe?  
Am I the only one who can’t get this to work or this is a common issue?

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [January 18, 2023, 6:29pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/72 "2023-01-18T18:29:53Z")

</div>

Never worked for me either.

---

<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: [January 18, 2023, 8:30pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/73 "2023-01-18T20:30:06Z")

</div>

The component works well. What issue/error are you seeing?

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [January 18, 2023, 9:07pm UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/74 "2023-01-18T21:07:29Z")

</div>

I saw only ordinary download link of a file. I didn’t start dig any deeper because it wasn’t that important for me, it would be nice to have, nothing else. So, sorry but I can’t light this more.

**Edit**

Well, I checked again — last time was some time ago.

DiscourseHub shows this (iPad), and no errors in logs of Discourse:

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

But when I tried using Safari it showed very first page, but not second.

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

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