Process files sequentially to avoid too many simultaneous requests

Oqtane.Server/wwwroot/js/interop.js

@@ -338,92 +338,90 @@ Oqtane.Interop = {
             progressbar.value = 0;
         }
 
-        const uploadFiles = Array.from(fileinput.files).map(file => {
+        const uploadFile = (file) => {
-            const uploadFile = () => {
+            const chunkSize = chunksize * (1024 * 1024);
-                const chunkSize = chunksize * (1024 * 1024);
+            const totalParts = Math.ceil(file.size / chunkSize);
-                const totalParts = Math.ceil(file.size / chunkSize);
+            let partCount = 0;
-                let partCount = 0;
 
-                let activeUploads = 0;
+            let activeUploads = 0;
 
-                const uploadPart = (partCount) => {
+            const uploadPart = (partCount) => {
-                    const start = partCount * chunkSize;
+                const start = partCount * chunkSize;
-                    const end = Math.min(start + chunkSize, file.size);
+                const end = Math.min(start + chunkSize, file.size);
-                    const chunk = file.slice(start, end);
+                const chunk = file.slice(start, end);
-
-                    return new Promise((resolve, reject) => {
-                        let formdata = new FormData();
-                        formdata.append('__RequestVerificationToken', antiforgerytoken);
-                        formdata.append('folder', folder);
-                        formdata.append('formfile', chunk, file.name);
-
-                        var credentials = 'same-origin';
-                        var headers = new Headers();
-                        headers.append('PartCount', partCount + 1);
-                        headers.append('TotalParts', totalParts);
-                        if (jwt !== "") {
-                            headers.append('Authorization', 'Bearer ' + jwt);
-                            credentials = 'include';
-                        }
-
-                        return fetch(posturl, {
-                            method: 'POST',
-                            headers: headers,
-                            credentials: credentials,
-                            body: formdata
-                        })
-                            .then(response => {
-                                if (!response.ok) {
-                                    if (progressinfo !== null) {
-                                        progressinfo.innerHTML = 'Error: ' + response.statusText;
-                                    }
-                                    throw new Error('Failed');
-                                }
-                                return;
-                            })
-                            .then(data => {
-                                if (progressbar !== null) {
-                                    uploadSize += chunk.size;
-                                    var percent = Math.ceil((uploadSize / totalSize) * 100);
-                                    progressbar.value = (percent / 100);
-                                }
-                                resolve(data);
-                            })
-                            .catch(error => {
-                                reject(error);
-                            });
-                    });
-                };
 
                 return new Promise((resolve, reject) => {
-                    function processNextUpload() {
+                    let formdata = new FormData();
-                        if (partCount >= totalParts) {
+                    formdata.append('__RequestVerificationToken', antiforgerytoken);
-                            if (activeUploads === 0) resolve(); // Done uploading all parts
+                    formdata.append('folder', folder);
-                            return;
+                    formdata.append('formfile', chunk, file.name);
-                        }
 
-                        while (activeUploads < maxConcurrentUploads && partCount < totalParts) {
+                    var credentials = 'same-origin';
-                            uploadPart(partCount)
+                    var headers = new Headers();
-                                .then(() => {
+                    headers.append('PartCount', partCount + 1);
-                                    activeUploads--;
+                    headers.append('TotalParts', totalParts);
-                                    processNextUpload();
+                    if (jwt !== "") {
-                                })
+                        headers.append('Authorization', 'Bearer ' + jwt);
-                                .catch(reject);
+                        credentials = 'include';
-
-                            activeUploads++;
-                            partCount++;
-                        }
                     }
 
-                    processNextUpload();
+                    return fetch(posturl, {
+                        method: 'POST',
+                        headers: headers,
+                        credentials: credentials,
+                        body: formdata
+                    })
+                        .then(response => {
+                            if (!response.ok) {
+                                if (progressinfo !== null) {
+                                    progressinfo.innerHTML = 'Error: ' + response.statusText;
+                                }
+                                throw new Error('Failed');
+                            }
+                            return;
+                        })
+                        .then(data => {
+                            if (progressbar !== null) {
+                                uploadSize += chunk.size;
+                                var percent = Math.ceil((uploadSize / totalSize) * 100);
+                                progressbar.value = (percent / 100);
+                            }
+                            resolve(data);
+                        })
+                        .catch(error => {
+                            reject(error);
+                        });
                 });
             };
 
-            return uploadFile();
+            return new Promise((resolve, reject) => {
-        });
+                function processNextUpload() {
+                    if (partCount >= totalParts) {
+                        if (activeUploads === 0) resolve(); // Done uploading all parts in the file
+                        return;
+                    }
+
+                    while (activeUploads < maxConcurrentUploads && partCount < totalParts) {
+                        uploadPart(partCount)
+                            .then(() => {
+                                activeUploads--;
+                                processNextUpload();
+                            })
+                            .catch(reject);
+
+                        activeUploads++;
+                        partCount++;
+                    }
+                }
+
+                processNextUpload();
+            });
+        };
 
         try {
-            await Promise.all(uploadFiles);
+            for (const file of fileinput.files) {
+                await uploadFile(file);
+            }
         } catch (error) {
             success = false;
         }