Una nuova era per l'upload di file in Discourse

Potresti aver notato negli ultimi mesi molti commit relativi ai caricamenti in Discourse core. Questo fa parte di uno sforzo generale all’interno del core per sostituire gli utilizzi di jQuery file upload dal nostro codebase, come parte di uno sforzo generale ancora più ampio per sostituire gli utilizzi di jQuery stesso dal nostro codebase. jQuery file uploader è un progetto molto vecchio ed è stato parte di Discourse core fin quasi dall’inizio. Penso di averlo usato per tutta la mia carriera anche in altri progetti. Ma è ora di ritirare il vecchio affidabile:

image500×752 50.3 KB

Abbiamo sostituito jQuery file upload (e presto sostituiremo anche un’altra libreria, resumable.js) con una libreria chiamata Uppy. Questa è una libreria di caricamento molto più moderna, facilmente estendibile con plugin e in grado di gestire tutti i diversi flussi di lavoro che le proponiamo. Importante, questo ci permette di effettuare caricamenti multipart diretti su S3 dal client Discourse, piuttosto che dover inviare file di grandi dimensioni attraverso la nostra API.

Il composer ora utilizza Uppy per tutti i caricamenti e molti altri punti dell’app lo utilizzano (caricamenti avatar, caricamenti sfondo profilo, ecc.). Gli ultimi ritardatari saranno eliminati nelle prossime settimane. Questo dovrebbe essere un cambiamento in gran parte invisibile per la maggior parte degli utenti, ma gli autori di plugin e componenti tema dovranno apportare alcune modifiche.

API Plugin

Preprocessori

Tutti i preprocessori di caricamento devono ora essere scritti come plugin Uppy. Questi plugin sono piuttosto semplici da scrivere e utilizzano un semplice flusso di lavoro basato su promise. Un preprocessore di caricamento può modificare un file o aggiungere metadati prima che Uppy lo carichi su S3 o sull’endpoint /uploads.json. Abbiamo già diversi preprocessori nel core che puoi usare come riferimento quando scrivi i tuoi:

• discourse/app/assets/javascripts/discourse/app/lib/uppy-checksum-plugin.js at 6662101208089def86ed18a81ac90d1c52670569 · discourse/discourse · GitHub
• discourse/app/assets/javascripts/discourse/app/lib/uppy-media-optimization-plugin.js at 6662101208089def86ed18a81ac90d1c52670569 · discourse/discourse · GitHub

I preprocessori di caricamento per il composer sono registrati tramite api.addComposerUploadPreProcessor utilizzando l’API dei plugin:

Gestori di Caricamento

I gestori di caricamento non sono scritti come plugin Uppy; funzionano ancora come sempre con una piccola modifica. Ora, quando un file corrisponde a un’estensione registrata per un gestore di caricamento, tutti i file corrispondenti verranno inviati contemporaneamente. In precedenza, solo un file alla volta veniva inviato al gestore di caricamento, e ora viene inviato un array:

I file gestiti da un gestore di caricamento non verranno ulteriormente elaborati nella pipeline di caricamento di Uppy. I preprocessori vengono eseguiti prima che vengano invocati i gestori di caricamento.

Caricamenti Diretti Multipart S3

In precedenza ho menzionato che il nostro utilizzo di Uppy ci consente anche di effettuare caricamenti multipart diretti su S3 dall’interfaccia utente. Per abilitare questa funzionalità, è necessario impostare l’impostazione del sito enable_direct_s3_uploads su true.

Se sei ospitato con noi, le autorizzazioni S3 pertinenti sono già state applicate al tuo bucket. Tuttavia, se stai auto-ospitando, ci sono diverse autorizzazioni e regole CORS che devono essere impostate sul tuo bucket affinché ciò funzioni.

Per le regole CORS, devi solo eseguire il task rake s3:ensure_cors_rules con rake s3:ensure_cors_rules. Aggiungerà le seguenti regole al tuo bucket finché avrai le autorizzazioni S3:GetBucketCors e S3:PutBucketCors abilitate per qualsiasi chiave di accesso e segreta tu abbia impostato per le tue credenziali S3 sulla tua istanza Discourse.

{
  "AllowedHeaders": [
    "Authorization",
    "Content-Disposition",
    "Content-Type"
  ],
  "AllowedMethods": [
    "GET",
    "HEAD",
    "PUT"
  ],
  "AllowedOrigins": [
    "*"
  ],
  "ExposeHeaders": [
    "ETag"
  ],
  "MaxAgeSeconds": 3000
}

Per le autorizzazioni, dovrai avere le seguenti autorizzazioni abilitate per qualsiasi chiave di accesso e segreta tu abbia impostato per le tue credenziali S3 sulla tua istanza Discourse.

{
    "Sid": "YourSid",
    "Effect": "Allow",
    "Action": [
        "s3:PutObjectVersionAcl",
        "s3:PutObjectAcl",
        "s3:PutObject",
        "s3:GetObjectAcl",
        "s3:GetObject",
        "s3:DeleteObject",
        "s3:CreateMultipartUpload",
        "s3:CompleteMultipartUpload",
        "s3:AbortMultipartUpload"
    ],
    "Resource": [
        "YOUR_RESOURCE"
    ]
}

Questo è stato un processo che ha richiesto diversi lunghi mesi e non abbiamo ancora finito! Posterò in questo topic quando saremo pronti a rimuovere completamente jQuery file uploader e resumable.js da Discourse core. Fammi sapere se hai domande su ciò che ho pubblicato qui!

5 post sono stati divisi in un nuovo argomento: Uppy non funziona su Firefox 68

Con questi due commit, jQuery file uploader e resumable.js non fanno più parte del core di Discourse:

Ho fatto del mio meglio per rimuovere tutti i riferimenti a questo e al nostro vecchio UploadMixin in tutti i plugin che conosciamo, ma potrebbero essercene alcuni che ho trascurato o di cui non sono a conoscenza. Non temere, il processo di migrazione è semplice. Il 99% dei casi d’uso può semplicemente utilizzare il nostro nuovo UppyUploadMixin come sostituzione diretta con modifiche minime necessarie. Per un esempio, dai un’occhiata qui:

Per l’altro 1%, puoi creare un’istanza di Uppy e agganciarti direttamente agli eventi. Per un esempio, dai un’occhiata qui:

Ho anche coperto le modifiche ai plugin nell’OP di questo argomento. Abbiamo ancora qualche settimana prima della nostra prossima release, quindi se qualcuno riscontra problemi, li segnali qui. È stato un viaggio selvaggio!

A proposito, la documentazione dell’API è stata aggiornata con i nuovi endpoint di caricamento. Vai su Discourse API Docs per vedere.

(cc @mattdm, potresti essere interessato a questo)

Dopo aver abilitato il caricamento diretto su S3, stiamo ricevendo segnalazioni da utenti in Cina che non riescono a caricare immagini: il caricamento si blocca allo 0% e va in timeout.

Il primo pensiero potrebbe essere che S3 sia bloccato in Cina, ma sappiamo per certo che non è così, almeno non completamente: i nostri utenti dalla Cina possono visualizzare le immagini archiviate su S3 senza problemi (il bucket si trova nella regione eu-central-1 nel nostro caso). Tuttavia, in qualche modo, solo il caricamento non sembra funzionare.

È difficile eseguire il debug senza trovarsi dietro il GFW, ma alcuni dei nostri utenti in Cina hanno menzionato che una differenza forse rilevante sembra essere che le immagini vengono caricate utilizzando l’endpoint dual-stack, ma il caricamento utilizza l’endpoint regolare (solo IPv4) (bucket-name.s3.dualstack.eu-central-1.amazonaws.com contro bucket-name.s3.eu-central-1.amazonaws.com). Da alcuni test, vediamo che effettivamente sembra essere così, ma non sono sicuro se sia intenzionale o richiesto per lo scopo di caricamento.

Forse più indicativo è il fatto che alcuni hanno segnalato che aggiungendo un IP risolto dall’hostname dualstack al loro file hosts (per l’hostname non dualstack) ha completamente risolto il problema e sono stati in grado di caricare con quella sola modifica.

Non sono sicuro se il team di Discourse abbia qualcuno situato in Cina che possa aiutare a eseguire un debug migliore?

Un post è stato spostato in un nuovo argomento: Errore durante la configurazione di S3: le azioni non esistono