Uppy uploader si rompe con più file trascinati sul composer

Bug
1

Ciao,
dall’ultimo aggiornamento (siamo in un ambiente gestito) la nostra funzionalità di caricamento sembra essere danneggiata, ma non stiamo facendo nulla di particolare.

Semplicemente registriamo un nuovo api.addComposerUploadHandler() da un componente del tema.
Questo funzionava benissimo con più file trascinati nel composer. Ora ci sono errori nella console che sembrano correlati a Uppy (motivo per cui non lo vogliamo).

Il nostro codice è molto semplice, ma Uppy sembra interferire con esso.

// Registra un gestore di caricamento personalizzato per i video.

	api.addComposerUploadHandler(["mp4", "mov", "mkv", "avi", "m4v"], (file, editor) => {
		console.log("Gestione caricamento per", file.name);
	})

Trascinando 3 file (mkv, mov, mkv) nel composer viene visualizzato il messaggio di errore “il tuo file è più grande di 4 MB”, che volevamo aggirare in primo luogo poiché carichiamo tutto su Gdrive.

image
image802×205 7.15 KB

La console di Chrome restituisce questi errori:

image
image1482×906 68 KB

Trascinando un singolo file di 50 MB non si verifica l’errore “file troppo grande” e il nostro file viene elaborato correttamente, come previsto. Quindi l’errore sembra verificarsi con più file e un file più grande di un limite di 4 MB (non sono sicuro di dove sia impostato questo limite).

Grazie per qualsiasi aiuto. Penso che sia correlato all’ultimo aggiornamento di Discourse stesso.

@martin

2

Ciao @Sören_Geier. Ci sono state alcune modifiche in quest’area di recente, anche se ho cercato di mantenere la parità con l’handler di upload esistente nel composer. Voglio solo capire meglio il tuo caso d’uso. Per quanto posso dire, anche la versione non-uppy del composer carica tramite api.addComposerUploadHandler gestisce un solo file alla volta:

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/mixins/composer-upload.js#L215-L222

Quindi, se trascini più file, si verificherà il normale flusso e immagino che nel caso dell’OP di questo argomento tu stia semplicemente raggiungendo i limiti di dimensione del file dal normale flusso di upload.

Cosa succedeva, o cosa ti aspetti che succeda, quando trascini e rilasci più file contemporaneamente? Sarebbe utile vedere il codice del tuo tema-componente, se non ti senti a tuo agio a condividerlo pubblicamente puoi inviarmi un messaggio privato qui su Meta.

Quindi, solo per confermare, sei ospitato da noi?

2 Mi Piace
4

Grazie per la rapida risposta @martin .

Sì, stiamo ospitando con voi. Quindi, quello che di solito succede quando trascini un file nella composizione è che inserisce del testo nella composizione tipo “Elaborazione ”… Inoltre, nel caso dell’uso di API.addComposerUploadHandler([“mp4”, “mov”, “mkv”, “avi”, “m4v”]), questo viene fatto da Discourse prima di passare il file all’handler personalizzato qui. L’inserimento di quel testo segnaposto ha smesso di funzionare a un certo punto, che è stato quando ho inserito il codice da solo nel mio handler:

composerController.model.appEvents.trigger("composer:insert-block", `[Processing: ${file.name}...]()`);

La cosa successiva che si è rotta è stata che il nostro handler non si è attivato perché all’improvviso quelle estensioni video sono scomparse dall’impostazione “estensioni autorizzate del tema” - o ho dovuto riaggiungerle lì perché le cose ricominciassero a funzionare.

Poi ho scoperto il problema del trascinamento di file “multipli” come descritto in precedenza.

Lo avevamo fatto funzionare in modo tale che fossi in grado di trascinare 2+ file senza messaggi di errore. E sembrava anche corretto perché stavamo aggirando tutta quella logica di convalida di Discourse.

Ecco gli snippet di codice pertinenti:

Qui mi aspetto semplicemente che Discourse mi passi i file trascinati. Uno dopo l’altro.

// Registra l'handler di caricamento personalizzato per i video.

api.addComposerUploadHandler(["mp4", "mov", "mkv", "avi", "m4v"], (file, editor) => {
console.log("Handling upload for", file.name);
sendToGDrive(file, api);
})

Poiché Discourse ci ha passato i file singolarmente, ho creato una funzione intermediaria che semplicemente riempie un array e dopo un timeout avvia la funzione di caricamento effettiva. Quindi sto raccogliendo il file passato da Discourse nel mio array.

// Raccoglie tutti i file trascinati in sequenza - come riportato dall'handler di Discourse.
function sendToGDrive(file, api) {
clearTimeout(uploaderStartTimeout);
filesHolder.push(file)
const composerController = api.container.lookup("controller:composer");
composerController.model.appEvents.trigger("composer:insert-block", `[Processing: ${file.name}...]()`);

uploaderStartTimeout = setTimeout(function () {
initFileSend(api);
}, 300);
}

Quindi carico ogni file individualmente su Gdrive.

// Gestisce ogni file individualmente.
async function initFileSend(api) {
for (const file of filesHolder) {
const content = await sendFileToGdrive(file, api, uploadFolderId);
}
}

Problemi osservati:

  • I trascinamenti di “file multipli” causano la convalida della dimensione del file mentre i trascinamenti di file singoli no
1 Mi Piace
5

Grazie per questo report dettagliato e per il codice associato. Stavo già pensando a qualcosa di simile per gli handler di caricamento; permettere a ogni file che corrisponde all’handler di entrare in una sorta di coda o pool come hai fatto qui e poi caricarli tutti in una volta o passarli a qualche altra interfaccia utente, perché avevo trovato strano il limite di 1 alla volta. Anche se, da quello che dici, forse ho capito male come funzionava il limite di 1 alla volta nel vecchio handler di caricamento del composer.

Quello che farò è alcuni test locali per vedere cosa faceva il vecchio uploader non-uppy con più file tramite un handler di caricamento con una versione semplificata della funzione che hai fornito in un componente del tema, poi cercherò di ottenere la parità tra il nuovo modo e il vecchio modo, perché sarà molto più flessibile che permettere solo un file alla volta.

Potrebbe volerci un po’ di tempo per risolvere, ci lavorerò oggi.

2 Mi Piace
6

Volevo solo dare un rapido aggiornamento; ho confermato che con gli handler di caricamento del composer pre-uppy, mentre il codice controlla se viene caricato un solo file, questo non è accurato perché jQuery file uploader invia un solo file alla volta attraverso questo percorso di codice, anche se si trascinano più file contemporaneamente. Questo è in contrasto con uppy, che elabora i file aggiunti in gruppi. Questa assunzione di un solo file alla volta è presente in altri due plugin che abbiamo creato e che utilizzano api.addComposerUploadHandler, quindi sembra essere un problema comune.

Come ho detto, penso che la migliore strada da percorrere sarà consentire a questo handler di elaborare più file che possono poi essere raggruppati e inviati altrove in un modo che abbia senso per l’autore del plugin/tema. Come minimo, posso correggere l’assunzione dell’handler di caricamento di uppy che solo un file possa essere inviato alla volta. Pubblicherò di nuovo qui una volta che avrò un altro aggiornamento.

2 Mi Piace
7

Un ultimo aggiornamento prima del (mio) fine settimana. Ho questa correzione che dovrebbe essere unita all’inizio della prossima settimana e che ripristinerà il “vecchio” modo di fare le cose da prima di uppy, ma all’interno di uppy. Quindi la tua implementazione tornerà a funzionare correttamente dopo questo:

Tuttavia, aggiungerò anche una successiva PR che cambierà addComposerUploadHandler per inviare più file al callback handler in un array, il che rimuoverà la necessità di impostare una coda e callback setTimeout per gestire più file in arrivo. Penso che questo sia comunque più corretto e un miglioramento generale dell’API.

Quindi il tuo handler diventerà qualcosa di simile a questo:

// Registra un gestore di caricamento personalizzato per i video.
api.addComposerUploadHandler(
  ["mp4", "mov", "mkv", "avi", "m4v"],
  (files, editor) => {
    console.log("Gestione caricamento per", files.map((file) => file.name).join(", "));
    sendToGDrive(files, api);
  }
);
2 Mi Piace
8

Eccellente. Grazie per averlo esaminato così rapidamente!
Buon fine settimana, se lo merita :blush:

2 Mi Piace
9

@Sören_Geier Ho appena unito DEV: Send multiple files in batches to composer upload handlers when using uppy by martin-brennan · Pull Request #15124 · discourse/discourse · GitHub che cambia uppy per inviare più file contemporaneamente all’handler di caricamento; dovrai aggiornare il tuo componente tema ora per gestirlo :slight_smile:

3 Mi Piace
10

Ottimo. Non è ancora stato distribuito, vero?

11

Sei sul nostro hosting Standard? Se sì, dovrebbe essere già stato distribuito :slight_smile:

3 Mi Piace
12

Ok, ho ricevuto lamentele sul fatto che le cose si sono interrotte per le persone che volevano caricare.
Ora ho esaminato la questione e ho anche riscontrato problemi iniziali nell’invio del mio file a GDRIVE poiché ho semplicemente passato l’oggetto file. Si è scoperto che l’oggetto file era una rappresentazione “uppy-wrapped” del file binario, simile a questa.

image
image868×513 103 KB

Per accedere effettivamente all’oggetto file nativo, ho dovuto lavorare con files[0].data. (forse una modifica che rompe la compatibilità?)

Prima di quella modifica, l’handler passava semplicemente l’oggetto file nativo. Potrei aspettarmi che altre persone riscontrino problemi di funzionalità con questa modifica, non ne sono sicuro.

Ora ho risolto tutto. Grazie mille per la rapida risposta e il supporto!

3 Mi Piace
13

Oh cielo, hai ragione, non so come me lo sia perso quando ho fatto quel recente refactor! :sweat: Spingerò una correzione questa mattina, non ci vorrà molto.

Modifica: La correzione è qui, dovrebbe essere distribuita sul nostro hosting standard nelle prossime ore.

3 Mi Piace
14

Ottimo, ho modificato anche il nostro codice. Penso che l’argomento possa essere chiuso ora. Grazie per l’eccezionale aiuto @martin

1 Mi Piace
15

Nessun problema! Ho fatto io il pasticcio, è giusto che lo pulisca io :sweat_smile:

1 Mi Piace