Support canceling file uploads (#4441)

Closes #4440

resources/scripts/components/server/files/UploadButton.tsx

@@ -2,7 +2,7 @@ import axios from 'axios';
 import getFileUploadUrl from '@/api/server/files/getFileUploadUrl';
 import tw from 'twin.macro';
 import { Button } from '@/components/elements/button/index';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { ModalMask } from '@/components/elements/Modal';
 import Fade from '@/components/elements/Fade';
 import useEventListener from '@/plugins/useEventListener';
@@ -12,6 +12,7 @@ import { ServerContext } from '@/state/server';
 import { WithClassname } from '@/components/types';
 import Portal from '@/components/elements/Portal';
 import { CloudUploadIcon } from '@heroicons/react/outline';
+import { useSignal } from '@preact/signals-react';
 
 function isFileOrDirectory(event: DragEvent): boolean {
     if (!event.dataTransfer?.types) {
@@ -23,14 +24,16 @@ function isFileOrDirectory(event: DragEvent): boolean {
 
 export default ({ className }: WithClassname) => {
     const fileUploadInput = useRef<HTMLInputElement>(null);
-    const [timeouts, setTimeouts] = useState<NodeJS.Timeout[]>([]);
-    const [visible, setVisible] = useState(false);
+
+    const visible = useSignal(false);
+    const timeouts = useSignal<NodeJS.Timeout[]>([]);
+
     const { mutate } = useFileManagerSwr();
     const { addError, clearAndAddHttpError } = useFlashKey('files');
 
     const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
     const directory = ServerContext.useStoreState((state) => state.files.directory);
-    const { clearFileUploads, appendFileUpload, removeFileUpload } = ServerContext.useStoreActions(
+    const { clearFileUploads, removeFileUpload, pushFileUpload, setUploadProgress } = ServerContext.useStoreActions(
         (actions) => actions.files
     );
 
@@ -40,27 +43,24 @@ export default ({ className }: WithClassname) => {
             e.preventDefault();
             e.stopPropagation();
             if (isFileOrDirectory(e)) {
-                return setVisible(true);
+                visible.value = true;
             }
         },
         { capture: true }
     );
 
-    useEventListener('dragexit', () => setVisible(false), { capture: true });
+    useEventListener('dragexit', () => (visible.value = false), { capture: true });
 
-    useEventListener('keydown', () => {
-        visible && setVisible(false);
-    });
+    useEventListener('keydown', () => (visible.value = false));
 
     useEffect(() => {
-        return () => timeouts.forEach(clearTimeout);
+        return () => timeouts.value.forEach(clearTimeout);
     }, []);
 
     const onUploadProgress = (data: ProgressEvent, name: string) => {
-        appendFileUpload({ name, loaded: data.loaded, total: data.total });
+        setUploadProgress({ name, loaded: data.loaded });
         if (data.loaded >= data.total) {
-            const timeout = setTimeout(() => removeFileUpload(name), 500);
-            setTimeouts((t) => [...t, timeout]);
+            timeouts.value.push(setTimeout(() => removeFileUpload(name), 500));
         }
     };
 
@@ -71,23 +71,20 @@ export default ({ className }: WithClassname) => {
             return addError('Folder uploads are not supported at this time.', 'Error');
         }
 
-        if (!list.length) {
-            return;
-        }
-
         const uploads = list.map((file) => {
-            appendFileUpload({ name: file.name, loaded: 0, total: file.size });
+            const controller = new AbortController();
+            pushFileUpload({ name: file.name, data: { abort: controller, loaded: 0, total: file.size } });
+
             return () =>
                 getFileUploadUrl(uuid).then((url) =>
                     axios.post(
                         url,
                         { files: file },
                         {
+                            signal: controller.signal,
                             headers: { 'Content-Type': 'multipart/form-data' },
                             params: { directory },
-                            onUploadProgress: (data) => {
-                                onUploadProgress(data, file.name);
-                            },
+                            onUploadProgress: (data) => onUploadProgress(data, file.name),
                         }
                     )
                 );
@@ -104,15 +101,15 @@ export default ({ className }: WithClassname) => {
     return (
         <>
             <Portal>
-                <Fade appear in={visible} timeout={75} key={'upload_modal_mask'} unmountOnExit>
+                <Fade appear in={visible.value} timeout={75} key={'upload_modal_mask'} unmountOnExit>
                     <ModalMask
-                        onClick={() => setVisible(false)}
+                        onClick={() => (visible.value = false)}
                         onDragOver={(e) => e.preventDefault()}
                         onDrop={(e) => {
                             e.preventDefault();
                             e.stopPropagation();
 
-                            setVisible(false);
+                            visible.value = false;
                             if (!e.dataTransfer?.files.length) return;
 
                             onFileSubmission(e.dataTransfer.files);