Visualizações em PDF inline

[Alon1 (Alon)]

Tentei isso, defini cors origins para https://xxxxx.s3.us-east-2.amazonaws.com
também defini DISCOURSE_ENABLE_CORS: true em /var/discourse/containers/app.yml
mas não está funcionando.

[tobiaseigen]

E você executou ./launcher rebuild app após fazer alterações em app.yml? Você também pode precisar fazer uma atualização forçada do navegador.

[tobiaseigen]

Aliás, você pode verificar a seção de arquivos das configurações de administrador para ver se você alterou configurações que estão afetando este recurso. Também não acho que este recurso possa funcionar se você estiver vinculando a um PDF hospedado em outro servidor. Acabei de testar isso no meu site e o mesmo PDF servido remotamente não mostrou a prévia.

Informe-nos se você encontrar a origem do problema!

Exemplo de markdown de post onde o remoto não funcionou, mas o carregado localmente funcionou.

remoto:

[test remote pdf](https://jsoncompare.org/LearningContainer/SampleFiles/PDF/sample-pdf-with-images.pdf)

carregado localmente:

[sample-pdf-with-images.pdf|attachment](upload://uOJLgHidEXnbqPRn2p6yP10ecQU.pdf) (3.8 MB)

como fica:

[Alon1 (Alon)]

@tobiaseigen

E você executou ./launcher rebuild app depois de fazer alterações em app.yml? Talvez você também precise fazer uma atualização forçada do navegador.

sim. mas não funcionou.

Quando você habilita o S3 no Discourse

Então, por definição, os arquivos são armazenados em um domínio diferente.
Acho que isso resolve o problema. Mas ainda espero que o plugin possa ser feito para suportar instalações do Discourse que tenham o S3 habilitado.

[tobiaseigen]

Não estou muito familiarizado com esta configuração. Você seguiu estas instruções?

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

Sim, tenho o S3 (e a configuração relacionada de “mídia segura”) funcionando há alguns anos sem problemas.
É apenas o componente de PDF inline que não funciona com essa configuração.

Como referência, mesmo configurando o app.yml assim:

DISCOURSE_ENABLE_CORS: true
DISCOURSE_CORS_ORIGIN: ‘*’

não ajuda.

[nathank (Nathan Kershaw)]

@Alon1

Sim, tenho o S3 (e a configuração relacionada de “mídia segura”) funcionando há alguns anos sem problemas.

Eu também me deparei com exatamente este problema e acabei revertendo meus uploads do S3 apenas para fazer este TC funcionar, pois tem alto valor para nós:

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…

Eu realmente acho que, como isso é #oficial e os uploads do S3 são incentivados, isso deveria ser analisado para ver se pode funcionar com o S3 de alguma forma. Pode ser que os PDFs sejam especificamente excluídos dos uploads do S3, mas isso seria péssimo, pois alguns são enormes!

[Alon1 (Alon)]

@nathankershaw

Eu realmente acho que, como esta é uma official e os uploads S3 são incentivados, isso deveria ser analisado para ver se pode funcionar com S3 de alguma forma.

Não acho que alguém discorde.
Estou imaginando que se trata de conscientização e prioridades.
Pelo menos em relação à “conscientização”, talvez @Johani, o OP, pudesse adicionar uma pequena nota no tópico desta discussão de que o componente PDF inline não funciona com S3 ativado.
Isso pouparia tempo de solução de problemas para outros e aumentaria a conscientização sobre o problema.

[JammyDodger]

Há algumas informações sobre S3 nestas postagens que retirei do auto-timer, se forem úteis?

@travelvc

Consegui corrigir isso adicionando a seguinte política CORS na configuração do meu bucket S3.

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

@Ed_Bobkov

É necessário acrescentar que, se vir este texto na mensagem de erro from origin 'https://lounge.travelmassive.com' has been onde o seu domínio está sem barra / no final, então na configuração CORS também deve adicionar o seu domínio sem barra no final, assim:
https://mydiscourse.url

[Alon1 (Alon)]

Sim, isso funciona
Para referência, caso mais alguém precise disso:

1. vá para os buckets do console da AWS https://s3.console.aws.amazon.com/s3/buckets e selecione o bucket que foi usado para sua instalação do Discourse

2. Escolha a aba Permissões
   

3. Role para baixo até "Compartilhamento de recursos entre origens (CORS)" e escreva:

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

Deve ficar assim:

[nathank (Nathan Kershaw)]

Quem me dera ter encontrado isso enquanto ainda estava fazendo uploads para o S3!!

Talvez eu precise revisitar isso agora. @JammyDodger, será que esse material deveria ser anotado tanto no S3 quanto nesta OP para que outros não tropeçem nisso.

[JammyDodger]

@nathankershaw

Talvez precise revisitar isso agora. @JammyDodger, eu me pergunto se esse material deveria ser anotado tanto no S3 quanto neste OP para que outros não tropeçem nisso.

Com certeza. Eu estava apenas esperando alguma confirmação de que funcionou antes de pensar em como melhor fazer uma edição.

[Ralf_Stockmann]

Duas ideias, abordando o mesmo problema: a viewport do discourse é bastante estreita, então a maioria dos PDFs é muito pequena para ser lida inline. Para resolver isso, poderíamos

a) tornar o iframe do PDF redimensionável? Já tentei isso com CSS, mas sem sucesso - a grade subjacente parece estar no caminho
b) oferecer um segundo link “abrir em nova aba” ao lado do link de download? Estou muito interessado em não baixar muitas coisas do nosso fórum.

[nathank (Nathan Kershaw)]

@Ralf_Stockmann

b) oferecer um segundo link “abrir em nova aba” além do link de download? Estou muito interessado em não baixar muitas coisas do nosso fórum.

Isso seria uma melhoria notável! E não deve ser muito difícil de adicionar, eu acho. Talvez eu tente um PR para isso se tiver tempo nos próximos dias.

[tobiaseigen]

Eu acho que (b) já é fornecido como uma opção, por exemplo, inline vs. abrir em nova aba. Talvez uma terceira opção para permitir que os usuários vejam inline e abram em nova aba? Eu também gosto dessa ideia.

(a) pode ser difícil, considerando o quão difícil pode ser fazer as coisas parecerem certas em uma postagem.

[Alon1 (Alon)]

Eu ficaria feliz em ver um botão de expansão

na barra de ferramentas que simplesmente exibe o PDF em tela cheia em vez de inline.

[denvergeeks]

@Ralf_Stockmann e @Alon1 vocês já tentaram…

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…

Além disso, no meu Discourse eu uso este método…

Incorporar um PDF do Google Drive

(Este é o meu método preferido para que PDFs em iFrames sejam responsivos - outros métodos geralmente falham em ser responsivos entre navegadores.)

1. Compartilhar
2. Copiar Link de Compartilhamento
3. Abrir Link de Compartilhamento em uma Nova Aba
4. Clicar nos 3 Pontos Verticais no Canto Superior Direito
5. Selecionar Incorporar Item
6. Copiar o Código iFrame Exibido
7. Colar no Editor do Discourse

Um PDF de Teste no Google Drive está incorporado aqui abaixo, que você pode \u003c\u003c Baixar Aqui \u003e\u003e

<iframe src="https://drive.google.com/file/d/1KQ-jn7R0NmZxw955QaPu3lvLFh5zpnDe/preview" width="640" height="480" allow="autoplay"></iframe>

É assim que fica… (que você também pode experimentar ao vivo AQUI no meu site)

[Alon1 (Alon)]

Ótimo!
Simplesmente (1) instalando o componente temático IFrame Lightboxes e (2) adicionando a URL do meu próprio site à lista de “domínios de origem do iframe” nas configurações do componente, funciona! Ele adiciona o botão de expandir logo acima do canto direito do PDF inline

Pronto para usar

[thoka (Thomas Kalka)]

Como ainda não consegui abrir PDFs em uma nova aba, escrevi um pequeno plugin para servir todos os PDFs locais com content-disposition: inline:

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