From e12dd0bb884315e8a299549e219554254ac8f3c2 Mon Sep 17 00:00:00 2001
From: David Salvisberg <david.salvisberg@seantis.ch>
Date: Wed, 18 Dec 2024 14:18:50 +0100
Subject: [PATCH] Org: Submits individual uploads in dropzone sequentially

Submitting them in parallel sometimes results in nginx producing 503
errors and there's no significant speed benefit to starting the uploads
in parallel, since we will still be limited by our bandwidth.

TYPE: Bugfix
LINK: OGC-1994
---
 src/onegov/org/assets/js/upload.js | 38 +++++++++++++++++++++++-------
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/onegov/org/assets/js/upload.js b/src/onegov/org/assets/js/upload.js
index e606132696..203c450408 100644
--- a/src/onegov/org/assets/js/upload.js
+++ b/src/onegov/org/assets/js/upload.js
@@ -32,17 +32,16 @@ var Upload = function(element) {
     var filelist = $(element.find('.upload-filelist'));
     var filelist_header = $(element.find('.upload-filelist-header'));
 
-    var upload = function(file) {
+    var upload_queue = [];
+    var pending_upload = false;
+
+    var upload = function(file, bar) {
         var xhr = new XMLHttpRequest();
         xhr.open('POST', url, true);
 
         var data = new FormData();
         data.append('file', file);
 
-        var bar = $('<div class="progress"><span class="meter" style="width: 0%"></span></div>')
-            .attr('data-filename', file.name)
-            .prependTo(progress);
-
         xhr.upload.addEventListener('progress', function(e) {
             bar.find('.meter').css('width', (e.loaded / e.total * 100 || 100) + '%');
         });
@@ -52,6 +51,8 @@ var Upload = function(element) {
                 return;
             }
 
+            pending_upload = false;
+
             if (xhr.status === 200) {
                 bar.remove();
                 filelist_header.show();
@@ -63,11 +64,30 @@ var Upload = function(element) {
                 bar.find('.meter').css('width', '100%');
                 bar.addClass('alert').attr('data-error', xhr.statusText);
             }
+
+            // eslint-disable-next-line no-use-before-define
+            process_upload_queue();
         });
 
         xhr.send(data);
     };
 
+    var process_upload_queue = function() {
+        if (pending_upload || upload_queue.length === 0) {
+            return;
+        }
+
+        var data = upload_queue.shift();
+        upload(data.file, data.bar);
+    };
+
+    var queue_upload = function(file) {
+        var bar = $('<div class="progress"><span class="meter" style="width: 0%"></span></div>')
+            .attr('data-filename', file.name)
+            .prependTo(progress);
+        upload_queue.push({file: file, bar: bar});
+    };
+
     dropzone.on('dragenter', function() {
         $(this).toggleClass('drag-over', true);
     });
@@ -84,19 +104,19 @@ var Upload = function(element) {
         var files = e.originalEvent.dataTransfer.files;
 
         for (var i = 0; i < files.length; i++) {
-            upload(files[i]);
+            queue_upload(files[i]);
         }
-
+        process_upload_queue();
         return false;
     });
 
     drop_button.on('change', function() {
-        console.log('change');
         var files = this.files;
 
         for (var i = 0; i < files.length; i++) {
-            upload(files[i]);
+            queue_upload(files[i]);
         }
+        process_upload_queue();
     });
 };