From df9a7f71f99a7afcd93de02b6b96fdf2ecc7dabf Mon Sep 17 00:00:00 2001 From: Dane Everitt Date: Mon, 21 Nov 2022 12:58:55 -0800 Subject: [PATCH] Support canceling file uploads (#4441) Closes #4440 --- package.json | 1 + .../components/elements/dialog/Dialog.tsx | 2 +- .../server/files/FileManagerStatus.tsx | 41 +++++++++++------ .../components/server/files/UploadButton.tsx | 45 +++++++++---------- resources/scripts/state/server/files.ts | 35 ++++++++++----- yarn.lock | 18 ++++++++ 6 files changed, 92 insertions(+), 50 deletions(-) diff --git a/package.json b/package.json index 562c22f7e..e716485cb 100644 --- a/package.json +++ b/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", diff --git a/resources/scripts/components/elements/dialog/Dialog.tsx b/resources/scripts/components/elements/dialog/Dialog.tsx index b280f0944..bb35fe8fb 100644 --- a/resources/scripts/components/elements/dialog/Dialog.tsx +++ b/resources/scripts/components/elements/dialog/Dialog.tsx @@ -90,7 +90,7 @@ export default ({ >
{iconPosition === 'container' && icon} -
+
{iconPosition !== 'container' && icon}
diff --git a/resources/scripts/components/server/files/FileManagerStatus.tsx b/resources/scripts/components/server/files/FileManagerStatus.tsx index 2e4144d0f..620e067c1 100644 --- a/resources/scripts/components/server/files/FileManagerStatus.tsx +++ b/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 (
- {uploads.map((file) => ( -
+ {uploads.map(([name, file]) => ( +
- {file.name} + {name} +
))} + clearFileUploads()}> + Cancel Uploads + Close
@@ -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), - total: state.files.uploads.reduce((count, file) => count + file.total, 0), + uploaded: Object.values(state.files.uploads).reduce((count, file) => count + file.loaded, 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 && ( - )} - + (open.value = false)} /> ); }; diff --git a/resources/scripts/components/server/files/UploadButton.tsx b/resources/scripts/components/server/files/UploadButton.tsx index 25277456d..c5cac0e29 100644 --- a/resources/scripts/components/server/files/UploadButton.tsx +++ b/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(null); - const [timeouts, setTimeouts] = useState([]); - const [visible, setVisible] = useState(false); + + const visible = useSignal(false); + const timeouts = useSignal([]); + 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 ( <> - + 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); diff --git a/resources/scripts/state/server/files.ts b/resources/scripts/state/server/files.ts index 4a4b7fb93..7e4786ae4 100644 --- a/resources/scripts/state/server/files.ts +++ b/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; setDirectory: Action; setSelectedFiles: Action; appendSelectedFile: Action; removeSelectedFile: Action; + pushFileUpload: Action; + setUploadProgress: Action; clearFileUploads: Action; - appendFileUpload: Action; removeFileUpload: Action; } 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]; + } }), }; diff --git a/yarn.lock b/yarn.lock index e29b8781d..3142ac755 100644 --- a/yarn.lock +++ b/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"