Anteprime PDF in linea

[omarfilip]

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

[nathank (Nathan Kershaw)]

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?

[Johani (Joe)]

@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 to load the PDF

discourse-pdf-previews/javascripts/discourse/initializers/initialize-for-pdf-preview.js at main · discourse/discourse-pdf-previews · GitHub

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 error. If you check the console, you’ll probably see something along the lines of this.

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.

[nathank (Nathan Kershaw)]

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

[omarfilip]

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

[Alon1 (Alon)]

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…

[sharewoodsDavid]

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

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

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

[sharewoodsDavid]

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

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

            return preview;
          }

[sharewoodsDavid]

This solution seems to work for all browsers.

[Benjamin_D (Benjamin Decotte)]

@sharewoodsDavid

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

        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)

[sharewoodsDavid]

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:

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

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

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

[Johani (Joe)]

I just pushed some changes.

DEV: Fix invalid markup

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

   All native browser PDF viewers have a download button, so you can download it from there if you want to.

@omarfilip

Chrome is again showing only gray boxes

@sharewoodsDavid

If you replace the above code with the following:

<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() like so

someElement.after(newElement)

If you want to add an element before another element, you can use insertBefore() like so

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

[omarfilip]

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

[spamless (Dallman Ross)]

@Johani

https://github.com/discourse/discourse-pdf-previews

Fantastico! Grazie mille. L’ho installato e funziona! Era proprio quello che cercavo.

[kbpierson (KatieBeth Pierson)]

@Johani

Come si usa?

1. installa il componente
2. consenti caricamenti pdf
3. aggiorna la pagina
4. carica un pdf

Ecco fatto. Il resto dovrebbe funzionare automaticamente.

Sarà retroattivo per i pdf già pubblicati nel forum?

[JammyDodger]

Ho appena testato sul mio sito di prova e sembra che funzioni anche per quelli esistenti, senza bisogno di ‘ricostruire l’html’.

[Alon1 (Alon)]

La settimana scorsa ho visto un aggiornamento nel codice sorgente, quindi immagino che questo componente sia attivo. Ma sfortunatamente non ha mai funzionato per me su nessun browser. È forse a causa delle impostazioni di sicurezza per i “media”? Sono l’unico a non riuscire a farlo funzionare o è un problema comune?

[Jagster (Jakke Lehtonen)]

Non ha mai funzionato nemmeno per me.

[omarfilip]

Il componente funziona bene. Quale problema/errore stai riscontrando?

[Jagster (Jakke Lehtonen)]

Ho visto solo un normale link per il download di un file. Non ho iniziato a scavare più a fondo perché non era così importante per me, sarebbe stato bello averlo, niente di più. Quindi, mi dispiace ma non posso approfondire questo.

Modifica

Beh, ho ricontrollato - l’ultima volta è stato un po’ di tempo fa.

DiscourseHub mostra questo (iPad), e nessun errore nei log di Discourse:

Ma quando ho provato a usare Safari ha mostrato la primissima pagina, ma non la seconda.