Support canceling file uploads (#4441)

Closes #4440

resources/scripts/state/server/files.ts

@@ -1,31 +1,32 @@
 import { action, Action } from 'easy-peasy';
 import { cleanDirectoryPath } from '@/helpers';
 
-export interface FileUpload {
-    name: string;
+export interface FileUploadData {
     loaded: number;
+    readonly abort: AbortController;
     readonly total: number;
 }
 
 export interface ServerFileStore {
     directory: string;
     selectedFiles: string[];
-    uploads: FileUpload[];
+    uploads: Record<string, FileUploadData>;
 
     setDirectory: Action<ServerFileStore, string>;
     setSelectedFiles: Action<ServerFileStore, string[]>;
     appendSelectedFile: Action<ServerFileStore, string>;
     removeSelectedFile: Action<ServerFileStore, string>;
 
+    pushFileUpload: Action<ServerFileStore, { name: string; data: FileUploadData }>;
+    setUploadProgress: Action<ServerFileStore, { name: string; loaded: number }>;
     clearFileUploads: Action<ServerFileStore>;
-    appendFileUpload: Action<ServerFileStore, FileUpload>;
     removeFileUpload: Action<ServerFileStore, string>;
 }
 
 const files: ServerFileStore = {
     directory: '/',
     selectedFiles: [],
-    uploads: [],
+    uploads: {},
 
     setDirectory: action((state, payload) => {
         state.directory = cleanDirectoryPath(payload);
@@ -44,19 +45,29 @@ const files: ServerFileStore = {
     }),
 
     clearFileUploads: action((state) => {
-        state.uploads = [];
+        Object.values(state.uploads).forEach((upload) => upload.abort.abort());
+
+        state.uploads = {};
     }),
 
-    appendFileUpload: action((state, payload) => {
-        if (!state.uploads.some(({ name }) => name === payload.name)) {
-            state.uploads = [...state.uploads, payload];
-        } else {
-            state.uploads = state.uploads.map((file) => (file.name === payload.name ? payload : file));
+    pushFileUpload: action((state, payload) => {
+        state.uploads[payload.name] = payload.data;
+    }),
+
+    setUploadProgress: action((state, { name, loaded }) => {
+        if (state.uploads[name]) {
+            state.uploads[name].loaded = loaded;
         }
     }),
 
     removeFileUpload: action((state, payload) => {
-        state.uploads = state.uploads.filter(({ name }) => name !== payload);
+        if (state.uploads[payload]) {
+            // Abort the request if it is still in flight. If it already completed this is
+            // a no-op.
+            state.uploads[payload].abort.abort();
+
+            delete state.uploads[payload];
+        }
     }),
 };