Anteprime PDF in linea

:discourse2: Riepilogo Anteprime PDF in linea è un componente del tema solo per desktop che ti permetterà di creare anteprime per gli allegati PDF.
:eyeglasses: Anteprima Anteprima su Discourse Theme Creator (solo desktop)
:hammer_and_wrench: Link al repository https://github.com/discourse/discourse-pdf-previews
:open_book: Nuovo ai temi Discourse? Guida per principianti all’uso dei temi Discourse

Installa questo componente del tema

Funzionalità

prima

dopo

Come accennato sopra, questo componente funziona solo su desktop. C’è poco vantaggio nel mostrare le anteprime su dispositivi mobili, poiché tutto sarebbe così piccolo e molto difficile da leggere.

Questo componente utilizza l’implementazione nativa del browser per renderizzare i PDF, quindi i risultati appariranno diversi su browser diversi.

Si noti inoltre che per impostazione predefinita gli upload di file PDF non sono consentiti in Discourse. Se desideri consentire agli utenti di caricare file PDF, dovrai aggiungere quell’estensione a authorized_extensions se vuoi che tutti gli utenti possano caricare PDF, oppure a authorized_extensions_for_staff se desideri limitare questa possibilità solo ai membri dello staff.

:information_source: Se utilizzi S3, potrebbe essere necessario anche aggiornare la tua policy CORS. Consulta il post qui sotto: Inline PDF Previews - #106 by JammyDodger

Come si usa?

  1. installa il componente
  2. consenti gli upload di PDF
  3. aggiorna la pagina
  4. carica un PDF

È tutto. Il resto dovrebbe funzionare automaticamente.

Impostazioni

Nome Descrizione
modalità anteprima In linea: gli allegati PDF verranno renderizzati all’interno dei post

Nuova scheda: i link agli allegati PDF apriranno una nuova scheda dove il PDF verrà renderizzato

Funzionalità aggiuntive

Se desideri che un singolo PDF non venga renderizzato in linea, puoi semplicemente aggiungere uno spazio prima del nome del file - ad esempio:

Questo verrà visualizzato in linea

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

Questo non verrà visualizzato in linea

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

:discourse2: Ospitato da noi? I componenti del tema sono disponibili per l’uso sui nostri piani Standard, Business ed Enterprise.

68 Mi Piace

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

Below is what Chrome console says:

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.

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

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

1 Mi Piace

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.

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.

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 :+1:

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.

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

9 Mi Piace

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.

9 Mi Piace

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?

3 Mi Piace

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.

3 Mi Piace

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

5 Mi Piace

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 Mi Piace

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

Disabling plugins via Safe Mode 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?

2 Mi Piace

I am seeing the same behaviour with s3 uploads on.

3 Mi Piace

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

1 Mi Piace

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

1 Mi Piace

:thinking:

  • my links in the messages are in the form of domain/secure-media-uploads/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 ?

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.

1 Mi Piace

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

3 Mi Piace

Grazie @Benjamin_D. Sembra che non abbia abilitato il caricamento sicuro, e i miei link sembrano tutti a posto e funzionano bene, come questo:

The HiNZ eHealth Forum - trusted online digital health discussion

Quindi sono bloccato, soprattutto sul motivo per cui funziona nei due forum che gestisco e non nell’altro, con S3 come unica differenza. E che tu riesca a farlo funzionare con S3. Sono davvero confuso.

1 Mi Piace

Dopo l’aggiornamento all’ultima versione di Discourse, gli allegati PDF non vengono più visualizzati. Qual potrebbe essere il problema?

1 Mi Piace

Potrebbe esserci un conflitto con un altro componente o tema. Per me funziona come previsto. Inizia disabilitando altri componenti e prova a utilizzare il tema predefinito se il tuo è diverso. Lo stesso vale per i plugin.

3 Mi Piace

Ok, ho fatto progressi. Disabilitando i caricamenti su S3, il problema si risolve per i nuovi caricamenti. Ma mi ritrovo con un caos tra S3 e locale se seguo questa strada!

Potrebbe essere che non sto usando la funzionalità CDN (CloudFront), che genera gli errori fastidiosi nella pagina di amministrazione. Proverò a configurarla e vediamo se funziona.

più tardi - no, la CDN non fa alcuna differenza.

molto più tardi - ho rimosso con successo i caricamenti su S3 (con un po’ di fatica), quindi ora è tutto a posto.

Ora, sono desideroso di migliorarlo! C’è qualche persona intelligente con le competenze necessarie interessata a provare?

4 Mi Piace

Sto cercando un plugin che permetta di aprire il PDF in una nuova scheda.
Il comportamento attuale del mio Discorso consente solo il download.
Sarebbe possibile con un tema simile?

5 Mi Piace