Inline PDF Previews

[Alon1 (Alon)]

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.

[tobiaseigen]

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

[tobiaseigen]

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.

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:

[Alon1 (Alon)]

@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

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.

[tobiaseigen]

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

Configure an S3 compatible object storage provider for uploads

This topic covers how to configure some common S3 compatible Object Storage providers (S3 clones). See Set up file and image uploads to S3 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 S3 Yes Digital Ocean Spaces Yes Linode Object Storage Yes Google Cloud Storage Yes Scaleway Object Storage Yes Vultr Obj…

[Alon1 (Alon)]

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

[nathank (Nathan Kershaw)]

@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

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 (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!

[Alon1 (Alon)]

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

[JammyDodger]

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.

<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

[Alon1 (Alon)]

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
   

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

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

Should look like this:

[nathank (Nathan Kershaw)]

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.

[JammyDodger]

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

[Ralf_Stockmann]

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.

[nathank (Nathan Kershaw)]

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

[tobiaseigen]

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.

[Alon1 (Alon)]

I would be happy to see an expand button

on the tool bar that simply shows the PDF full screen instead of inline.

[denvergeeks]

@Ralf_Stockmann and @Alon1 have you tried…

IFrame Lightboxes

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. [expand button] Clicking the button will open the iframe in fullscreen in a lightbox. [full screen iframe 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 >>

<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 on my site)

[Alon1 (Alon)]

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

Right out of the box

[thoka (Thomas Kalka)]

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:

GitHub - thoka/discourse-send-pdf-inline: Patch discourse do serve PDFs inline