Parallelisierung verhindern

[Rolf B]

Hallo Felix,

du brauchst nur eine async-Funktion, die den Upload durchführt.

Aufruf im Eventhandler für den Submit

// Variante 1
runUploads(fileInput.files)
.then ( runCleanup );
.catch ( error => ... );

// Variante 2
try {
   await runUploads(fileInput.files);
   runCleanup();
}
catch (error) {
   ... behandle error ...
}

Variante 1 ist klassische Promise-Verarbeitung und läuft überall. Variante 2 verwendet await und muss seinerseits in einer async-Funktion stehen. Aber der Eventhandler, der den Upload anstößt. kann ja problemlos async sein.

Ich habe mal unterstellt, dass Du nach dem Upload noch etwas Cleanup machen musst. Wenn nicht, ok, dann ist das überflüssig.

Die runUploads-Funktion:

async function runUploads(fileList) {
   for (const file of fileList) {
      const chunks = Math.ceil(file.size / CHUNKSIZE);
      for (i=0; i<chunks; i++) {
         const formData = new FormData();
         // Chunk i in formData eintragen
         const response = await fetch(
             myURL,
             { method: "POST", body: formData });
         const jsonResult = await response.json();
         if (jsonResult.error) {
            handleError(jsonResult.error);
            break;            // Dieses File abbrechen
         }
      }
   }
}

Da ist jetzt kein try/catch drin, d.h. FALLS ein Error fliegt, bricht runUploads ab und das Promise für ihren Aufruf wird gebrochen. Deshalb entweder ein .catch() an den Aufruf oder den Aufruf in try/catch kapseln.

Wenn Du feingranularer auf Fehler reagieren willst, musst Du weitere try/catch einbauen.

Ob Du bei result.error (was äquivalent zu deinem "error" in data sein dürfte nur einen break machst und damit die aktuelle Datei abbrichst oder gleich return durchführst und den Upload komplett beendest, ist ebenfalls deine Entscheidung.

Ich finde, dass das eine sehr einfache Art ist, die Chunks sauber serialisieren zu können. async/await sollte man heutzutage überall voraussetzen können.

Rolf