Previsualizaciones en línea de PDFs

[Alon1 (Alon)]

Intenté eso, establecí cors origins en https://xxxxx.s3.us-east-2.amazonaws.com
también establecí DISCOURSE_ENABLE_CORS: true en /var/discourse/containers/app.yml
pero no está funcionando.

[tobiaseigen]

¿Y ejecutaste ./launcher rebuild app después de hacer cambios en app.yml? También podrías necesitar hacer una actualización forzada del navegador.

[tobiaseigen]

Por cierto, podrías revisar la sección de archivos de la configuración del administrador para ver si cambiaste alguna configuración que esté afectando esta función. Tampoco creo que se pueda esperar que esta función funcione si estás enlazando a un PDF alojado en otro servidor. Acabo de probar esto en mi sitio y el mismo PDF servido de forma remota no mostró la vista previa.

¡Avísanos si encuentras la fuente del problema!

Muestra de markdown de una publicación donde el enlace remoto no funcionó pero el cargado localmente sí.

remoto:

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

cargado localmente:

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

Cómo se ve:

[Alon1 (Alon)]

@tobiaseigen

¿Y ejecutaste ./launcher rebuild app después de hacer cambios en app.yml? Es posible que también necesites hacer una actualización forzada del navegador.

Sí, pero no funcionó.

Cuando habilitas S3 en Discourse

Entonces, por definición, los archivos se almacenan en un dominio diferente.
Supongo que eso aclara el problema. Pero todavía espero que el plugin pueda ser compatible con las instalaciones de Discourse que tienen S3 habilitado.

[tobiaseigen]

No estoy muy familiarizado con esta configuración. ¿Seguiste estas instrucciones?

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

Sí, he tenido S3 (y la configuración relacionada de “medios seguros”) funcionando durante los últimos años sin problemas.
Solo el componente Inline PDF no funciona con esta configuración.

Como referencia, incluso configurando app.yml de esta manera:

DISCOURSE_ENABLE_CORS: true
DISCOURSE_CORS_ORIGIN: ‘*’

no ayuda.

[nathank (Nathan Kershaw)]

@Alon1

Sí, tengo S3 (y la configuración relacionada de “medios seguros”) funcionando desde hace un par de años sin problemas.

Yo también me encontré con este exacto problema y terminé revirtiendo mis cargas de S3 solo para que este TC funcionara, ya que tiene un alto valor para nosotros:

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…

Realmente creo que, dado que esto es official y se fomenta la carga de S3, se debería examinar para ver si se puede hacer que funcione con S3 de alguna manera. Podría ser que los PDF estén específicamente excluidos de las cargas de S3, ¡pero eso sería una porquería ya que algunos son enormes!

[Alon1 (Alon)]

@nathankershaw

Realmente creo que, dado que esta es una etiqueta #official:: y se fomentan las cargas de S3, esto debería examinarse para ver si se puede hacer que funcione con S3 de alguna manera.

No creo que nadie discrepe.
Supongo que se trata de concienciación y prioridades.
Al menos en cuanto a la “concienciación”, quizás @Johani, el OP, podría añadir una pequeña nota en el tema de esta discusión de que el componente PDF en línea no funciona con S3 habilitado.
Ahorraría a otros tiempo de solución de problemas y crearía conciencia sobre el problema.

[JammyDodger]

Hay un poco de información sobre S3 en estas publicaciones que he extraído del temporizador automático, ¿por si sirven de ayuda?

@travelvc

Pude solucionar esto agregando la siguiente política CORS en la configuración de mi bucket S3.

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

@Ed_Bobkov

Hay que añadir que si ves este texto en el mensaje de error from origin 'https://lounge.travelmassive.com' has been donde tu dominio no tiene barra / al final, entonces en la configuración CORS también debes añadir tu dominio sin barra al final, así:
https://mydiscourse.url

[Alon1 (Alon)]

Sí, eso funciona
Como referencia si alguien más necesita esto:

1. Ve a la consola de AWS, a los buckets https://s3.console.aws.amazon.com/s3/buckets y selecciona el bucket que se utilizó para tu instalación de Discourse

2. Elige la pestaña de Permisos
   

3. Desplázate hacia abajo hasta “Uso compartido de recursos de origen cruzado (CORS)” y escribe:

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

Debería verse así:

[nathank (Nathan Kershaw)]

¡Ojalá hubiera encontrado eso mientras todavía estaba en las cargas de S3!

Puede que necesite revisarlo ahora. @JammyDodger, me pregunto si esas cosas deberían anotarse tanto en S3 como en este OP para que otros no tropiecen con esto.

[JammyDodger]

@nathankershaw

Puede que necesite revisarlo ahora. @JammyDodger, me pregunto si esas cosas deberían anotarse tanto en S3 como en este OP para que otros no tropiecen con esto.

Absolutamente. Solo estaba esperando alguna confirmación de que funcionó antes de pensar en la mejor manera de hacer una edición.

[Ralf_Stockmann]

Dos ideas, abordando el mismo problema: la vista de Discourse es bastante estrecha, por lo que la mayoría de los PDF son demasiado pequeños para leerlos en línea. Para abordar esto, podríamos
a) ¿hacer que el iframe de PDF sea redimensionable? Ya lo intenté con CSS, pero sin éxito; la cuadrícula subyacente parece estar en el camino.
b) ¿ofrecer un segundo enlace “abrir en una nueva pestaña” además del enlace de descarga? Estoy muy interesado en no descargar demasiadas cosas de nuestro foro.

[nathank (Nathan Kershaw)]

[cita=“Ralf Stockmann, post:111, topic:157649, username:Ralf_Stockmann”]
b) ¿ofrecer un segundo enlace “abrir en una nueva pestaña” además del enlace de descarga? Estoy muy interesado en no descargar demasiadas cosas de nuestro foro.
[/cita]

¡Esto sería una mejora notable! Y no debería ser muy difícil de agregar, creo. Podría intentar hacer un PR (Pull Request) para esto si tengo tiempo en los próximos días.

[tobiaseigen]

Creo que (b) ya se proporciona como una opción, por ejemplo, en línea o abrir en una nueva pestaña. ¿Quizás una tercera opción para que los usuarios vean en línea y abran en una nueva pestaña? También me gusta esta idea.

(a) puede ser difícil dado lo difícil que puede ser que las cosas se vean bien en una publicación.

[Alon1 (Alon)]

Me complacería ver un botón de expandir

en la barra de herramientas que muestre el PDF a pantalla completa en lugar de en línea.

[denvergeeks]

@Ralf_Stockmann y @Alon1 ¿han probado…

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…

Además, en mi Discourse uso este método…

Incrustar un PDF de Google Drive

(Este es mi método preferido para que los PDF en iFrames sean responsivos; otros métodos suelen fallar en ser responsivos entre navegadores).

1. Compartir
2. Copiar enlace para compartir
3. Abrir enlace para compartir en una nueva pestaña
4. Hacer clic en los 3 puntos verticales en la esquina superior derecha
5. Seleccionar “Incrustar elemento”
6. Copiar el código iFrame mostrado
7. Pegarlo en el editor de Discourse

Aquí se incrusta un PDF de prueba en Google Drive que puedes << Descargar Aquí >>

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

Así es como se ve… (que también puedes probar en vivo AQUÍ en mi sitio)

[Alon1 (Alon)]

¡Eso es genial!
Simplemente (1) instalando el componente temático IFrame Lightboxes y (2) agregando la URL de mi propio sitio web a la lista de “dominios de origen de iframe” en la configuración del componente, ¡funciona! Agrega el botón de expandir justo encima de la esquina derecha del PDF en línea

Directamente desde el primer momento

[thoka (Thomas Kalka)]

Como todavía no podía abrir PDFs en una nueva pestaña, escribí un pequeño plugin para servir todos los PDFs locales con content-disposition: inline:

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