Visualizações em PDF inline

[Discourse]

	Resumo	Pré-visualizações de PDF embutidas é um componente de tema apenas para desktop que permitirá que você crie pré-visualizações para anexos em PDF.
	Pré-visualização	Pré-visualizar no Criador de Temas do Discourse (apenas desktop)
	Link do Repositório	https://github.com/discourse/discourse-pdf-previews
	Novo em Temas do Discourse?	Guia para iniciantes sobre o uso de Temas do Discourse

Instalar este componente de tema

Como este é um #componente_de_tema_oficial mantido pela equipe do Discourse, solicitações de #suporte, bug, ux e #funcionalidade podem ser feitas nas respectivas categorias aqui no Meta, e marcadas com a tag apropriada do componente de tema. Clique em um link abaixo para iniciar um.

 Suporte  Bug  UX  Funcionalidade

Funcionalidades

antes

depois

Como mencionado acima, este componente funcionará apenas em desktop. Há muito pouco benefício em mostrar as pré-visualizações no mobile, já que tudo ficará tão pequeno e muito difícil de ler.

Este componente usa a implementação nativa do navegador para renderizar os PDFs, então os resultados parecerão diferentes em diferentes navegadores.

Além disso, note que o upload de PDFs não é permitido por padrão no Discourse. Se você quiser permitir que seus usuários façam upload de arquivos PDF, precisará adicionar essa extensão às authorized_extensions se quiser que todos os seus usuários possam fazer upload de PDFs, ou às authorized_extensions_for_staff se quiser limitar isso a membros da equipe.

Se estiver usando S3, talvez seja necessário atualizar sua política de CORS. Consulte a postagem abaixo: Inline PDF Previews - #106 by JammyDodger

Como uso?

1. instale o componente
2. permita uploads de PDF
3. atualize a página
4. faça upload de um PDF

É isso. O resto deve funcionar automaticamente.

Configurações

Nome	Descrição
modo de pré-visualização	Embutido: Anexos de PDF serão renderizados embutidos dentro das postagens Nova Aba: Links de anexos de PDF levarão o usuário a uma nova aba onde o PDF será renderizado

Funcionalidades Adicionais

Se você quiser que um PDF individual não seja renderizado embutido, basta adicionar um espaço antes do nome do arquivo - por exemplo:

Isso será exibido embutido

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

Isso não será exibido embutido

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

Hospedado por nós? Componentes de tema estão disponíveis para uso em nossos planos Standard, Business e Enterprise.

[travelvc (Ian C)]

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>

[Ed_Bobkov (Ed)]

@travelvc

<AllowedOrigin>https://mydiscourse.url/</AllowedOrigin>

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

[Johani (Joe)]

@Jeremie_Leroy

could it be a conflict with other plugins ?

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.

@travelvc

I was able to fix this by adding the following CORS policy in my S3 bucket configuration.

@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

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.

@rishabh

I’m seeing the same problem

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

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.

[pacharanero (Marcus Baw)]

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.

[paulrudy]

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?

[paulrudy]

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.

[nathank (Nathan Kershaw)]

@pacharanero

Would it be possible to make PDF Preview suppressable by prepending a space before the upload link, like with oneboxing?

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

[Freez (Damien Lecan)]

@paulrudy

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.

Same issue for me on Firefox, but only after the 2nd visit
Is there a workaround for this? Manual declaration in the CSP config?

Thank you

[nathank (Nathan Kershaw)]

Isso parou de funcionar no meu site. Em vez da prévia do PDF, aparece uma grande caixa preta:

Desativar plugins via Modo Seguro não faz diferença, assim como remover todos os outros componentes do Tema.

Isso ocorreu após mover as imagens e uploads de arquivos para o S3, o que pode ser o culpado. Espero que não, pois não é fácil reverter isso!

Estou sem ideias. Que pena, pois é um ótimo componente. Alguma sugestão?

[keven]

Estou observando o mesmo comportamento com uploads no S3 ativado.

[Benjamin_D (Benjamin Decotte)]

Você ainda consegue baixar o PDF?
Está funcionando para mim (s3 + mídia segura e sem CDN)

[nathank (Nathan Kershaw)]

@Benjamin_D

Você ainda consegue baixar o PDF?

Sim, conseguimos. Temos a mesma configuração que você (acho).

[Benjamin_D (Benjamin Decotte)]

• meus links nas mensagens estão no formato domain/secure-media-uploads/original/...
• mas no console/rede consigo ver que os downloads reais vêm do bucket
  Você vê a credencial amz?

Se não, talvez isso ajude?

@martin

Se quiser que todos os uploads sejam analisados retroativamente e possivelmente marcados como seguros, execute a tarefa rake uploads:secure_upload_analyse_and_update.

Também me lembro de que algo estranho acontecia quando tentei mover uma postagem de categorias (ou era uma cópia/cola?). No final, funcionou quando reenviei o arquivo.

[reclaimedpress]

Estou enfrentando o mesmo comportamento em uma instalação nova do Discourse e com um anexo PDF recém-adicionado.

[nathank (Nathan Kershaw)]

@Benjamin_D

Se não, talvez isso possa ajudar?

Obrigado, @Benjamin_D. Acontece que não tenho o upload seguro ativado, e meus links ficam ótimos e funcionam perfeitamente, como este aqui:

The HiNZ eHealth Forum - trusted online digital health discussion

Então estou sem ideias — especialmente sobre o motivo de funcionar em dois fóruns que eu administro e não no outro — sendo o S3 a única diferença. E que você consegue fazer funcionar com o S3. Estou realmente confuso.

[hollosch]

Após atualizar para a versão mais recente do Discourse, os anexos PDF não são mais exibidos. Qual poderia ser o problema?

[omarfilip]

Pode ser um conflito com outro componente ou tema. Está funcionando como esperado para mim. Comece desativando outros componentes e tente usar o tema padrão, se o seu for diferente. O mesmo vale para plugins.

[nathank (Nathan Kershaw)]

@nathank

Então estou sem saída — especialmente quanto ao motivo de funcionar em dois fóruns que eu administro e não no outro, sendo o S3 a única diferença. E que você conseguiu fazer funcionar com o S3. Estou realmente confuso.

Ok — fiz progresso. Desativar os uploads para o S3 resolve o problema para novos uploads. Mas fico com uma bagunça entre S3 e local se seguir por esse caminho!

Pode ser que eu não esteja usando o tal do CDN (CloudFront), que gera os erros irritantes na página de administração. Vou tentar configurá-lo e ver se funciona.

mais tarde — não, um CDN não faz diferença.

muito mais tarde — consegui remover os uploads para o S3 com sucesso (com um pouco de suor), então está tudo certo agora.

Agora, estou animado para melhorar isso! Tem alguma pessoa esperta com as habilidades necessárias interessada em tentar?

@pacharanero

Seria possível fazer com que a Prévia de PDF seja suprimida ao adicionar um espaço antes do link de upload, como acontece com o oneboxing? Às vezes você quer uma lista de documentos e não as prévias. Outras vezes, você quer uma prévia.

[thoka (Thomas Kalka)]

Estou procurando um plugin que permita abrir o PDF em uma nova aba.
O comportamento atual do meu Discourse é permitir apenas o download.
Seria possível fazer isso com um tema semelhante?