Support canceling file uploads (#4441)

Closes #4440

package.json

@@ -11,6 +11,7 @@
         "@headlessui/react": "^1.6.4",
         "@heroicons/react": "^1.0.6",
         "@hot-loader/react-dom": "^16.14.0",
+        "@preact/signals-react": "^1.2.1",
         "@tailwindcss/forms": "^0.5.2",
         "@tailwindcss/line-clamp": "^0.4.0",
         "axios": "^0.27.2",

resources/scripts/components/elements/dialog/Dialog.tsx

@@ -90,7 +90,7 @@ export default ({
                                 >
                                     <div className={'flex p-6 pb-0 overflow-y-auto'}>
                                         {iconPosition === 'container' && icon}
-                                        <div className={'flex-1 max-h-[70vh]'}>
+                                        <div className={'flex-1 max-h-[70vh] min-w-0'}>
                                             <div className={'flex items-center'}>
                                                 {iconPosition !== 'container' && icon}
                                                 <div>

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

@@ -1,11 +1,12 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { ServerContext } from '@/state/server';
-import { CloudUploadIcon } from '@heroicons/react/solid';
+import { CloudUploadIcon, XIcon } from '@heroicons/react/solid';
 import asDialog from '@/hoc/asDialog';
 import { Dialog, DialogWrapperContext } from '@/components/elements/dialog';
 import { Button } from '@/components/elements/button/index';
 import Tooltip from '@/components/elements/tooltip/Tooltip';
 import Code from '@/components/elements/Code';
+import { useSignal } from '@preact/signals-react';
 
 const svgProps = {
     cx: 16,
@@ -31,23 +32,34 @@ const Spinner = ({ progress, className }: { progress: number; className?: string
 
 const FileUploadList = () => {
     const { close } = useContext(DialogWrapperContext);
+    const removeFileUpload = ServerContext.useStoreActions((actions) => actions.files.removeFileUpload);
+    const clearFileUploads = ServerContext.useStoreActions((actions) => actions.files.clearFileUploads);
     const uploads = ServerContext.useStoreState((state) =>
-        state.files.uploads.sort((a, b) => a.name.localeCompare(b.name))
+        Object.entries(state.files.uploads).sort(([a], [b]) => a.localeCompare(b))
     );
 
     return (
         <div className={'space-y-2 mt-6'}>
-            {uploads.map((file) => (
+            {uploads.map(([name, file]) => (
-                <div key={file.name} className={'flex items-center space-x-3 bg-gray-700 p-3 rounded'}>
+                <div key={name} className={'flex items-center space-x-3 bg-gray-700 p-3 rounded'}>
                     <Tooltip content={`${Math.floor((file.loaded / file.total) * 100)}%`} placement={'left'}>
                         <div className={'flex-shrink-0'}>
                             <Spinner progress={(file.loaded / file.total) * 100} className={'w-6 h-6'} />
                         </div>
                     </Tooltip>
-                    <Code>{file.name}</Code>
+                    <Code className={'flex-1 truncate'}>{name}</Code>
+                    <button
+                        onClick={removeFileUpload.bind(this, name)}
+                        className={'text-gray-500 hover:text-gray-200 transition-colors duration-75'}
+                    >
+                        <XIcon className={'w-5 h-5'} />
+                    </button>
                 </div>
             ))}
             <Dialog.Footer>
+                <Button.Danger variant={Button.Variants.Secondary} onClick={() => clearFileUploads()}>
+                    Cancel Uploads
+                </Button.Danger>
                 <Button.Text onClick={close}>Close</Button.Text>
             </Dialog.Footer>
         </div>
@@ -60,17 +72,17 @@ const FileUploadListDialog = asDialog({
 })(FileUploadList);
 
 export default () => {
-    const [open, setOpen] = useState(false);
+    const open = useSignal(false);
 
-    const count = ServerContext.useStoreState((state) => state.files.uploads.length);
+    const count = ServerContext.useStoreState((state) => Object.keys(state.files.uploads).length);
     const progress = ServerContext.useStoreState((state) => ({
-        uploaded: state.files.uploads.reduce((count, file) => count + file.loaded, 0),
+        uploaded: Object.values(state.files.uploads).reduce((count, file) => count + file.loaded, 0),
-        total: state.files.uploads.reduce((count, file) => count + file.total, 0),
+        total: Object.values(state.files.uploads).reduce((count, file) => count + file.total, 0),
     }));
 
     useEffect(() => {
         if (count === 0) {
-            setOpen(false);
+            open.value = false;
         }
     }, [count]);
 
@@ -78,13 +90,16 @@ export default () => {
         <>
             {count > 0 && (
                 <Tooltip content={`${count} files are uploading, click to view`}>
-                    <button className={'flex items-center justify-center w-10 h-10'} onClick={setOpen.bind(this, true)}>
+                    <button
+                        className={'flex items-center justify-center w-10 h-10'}
+                        onClick={() => (open.value = true)}
+                    >
                         <Spinner progress={(progress.uploaded / progress.total) * 100} className={'w-8 h-8'} />
                         <CloudUploadIcon className={'h-3 absolute mx-auto animate-pulse'} />
                     </button>
                 </Tooltip>
             )}
-            <FileUploadListDialog open={open} onClose={setOpen.bind(this, false)} />
+            <FileUploadListDialog open={open.value} onClose={() => (open.value = false)} />
         </>
     );
 };

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', () => {
+    useEventListener('keydown', () => (visible.value = false));
-        visible && setVisible(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);
+            timeouts.value.push(setTimeout(() => removeFileUpload(name), 500));
-            setTimeouts((t) => [...t, timeout]);
         }
     };
 
@@ -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) => onUploadProgress(data, file.name),
-                                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);

resources/scripts/state/server/files.ts

@@ -1,31 +1,32 @@
 import { action, Action } from 'easy-peasy';
 import { cleanDirectoryPath } from '@/helpers';
 
-export interface FileUpload {
+export interface FileUploadData {
-    name: string;
     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) => {
+    pushFileUpload: action((state, payload) => {
-        if (!state.uploads.some(({ name }) => name === payload.name)) {
+        state.uploads[payload.name] = payload.data;
-            state.uploads = [...state.uploads, payload];
+    }),
-        } else {
+
-            state.uploads = state.uploads.map((file) => (file.name === payload.name ? payload : file));
+    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];
+        }
     }),
 };
 

yarn.lock

@@ -1493,6 +1493,19 @@
     mkdirp "^1.0.4"
     rimraf "^3.0.2"
 
+"@preact/signals-core@^1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@preact/signals-core/-/signals-core-1.2.2.tgz#279dcc5ab249de2f2e8f6e6779b1958256ba843e"
+  integrity sha512-z3/bCj7rRA21RJb4FeJ4guCrD1CQbaURHkCTunUWQpxUMAFOPXCD8tSFqERyGrrcSb4T3Hrmdc1OAl0LXBHwiw==
+
+"@preact/signals-react@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@preact/signals-react/-/signals-react-1.2.1.tgz#6d5d305ebdb38c879043acebc65c0d9351e663c1"
+  integrity sha512-73J8sL1Eru7Ot4yBYOCPj1izEZjzCEXlembRgk6C7PkwsqoAVbCxMlDOFfCLoPFuJ6qeGatrJzRkcycXppMqVQ==
+  dependencies:
+    "@preact/signals-core" "^1.2.2"
+    use-sync-external-store "^1.2.0"
+
 "@sinclair/typebox@^0.23.3":
   version "0.23.5"
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.23.5.tgz#93f7b9f4e3285a7a9ade7557d9a8d36809cbc47d"
@@ -9121,6 +9134,11 @@ use-memo-one@^1.1.1:
   resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.1.tgz#39e6f08fe27e422a7d7b234b5f9056af313bd22c"
   integrity sha512-oFfsyun+bP7RX8X2AskHNTxu+R3QdE/RC5IefMbqptmACAA/gfol1KDD5KRzPsGMa62sWxGZw+Ui43u6x4ddoQ==
 
+use-sync-external-store@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 use@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.0.tgz#14716bf03fdfefd03040aef58d8b4b85f3a7c544"