File upload status (v2 backport) (#4219)

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

@@ -13,6 +13,7 @@ import tw from 'twin.macro';
 import { Button } from '@/components/elements/button/index';
 import { ServerContext } from '@/state/server';
 import useFileManagerSwr from '@/plugins/useFileManagerSwr';
+import FileManagerStatus from '@/components/server/files/FileManagerStatus';
 import MassActionsBar from '@/components/server/files/MassActionsBar';
 import UploadButton from '@/components/server/files/UploadButton';
 import ServerContentBlock from '@/components/elements/ServerContentBlock';
@@ -104,6 +105,7 @@ export default () => {
                                     <FileObjectRow key={file.key} file={file} />
                                 ))}
                                 <MassActionsBar />
+                                <FileManagerStatus />
                             </div>
                         </CSSTransition>
                     )}

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import tw, { styled } from 'twin.macro';
+import { ServerContext } from '@/state/server';
+import { bytesToString } from '@/lib/formatters';
+
+const SpinnerCircle = styled.circle`
+    transition: stroke-dashoffset 0.35s;
+    transform: rotate(-90deg);
+    transform-origin: 50% 50%;
+`;
+
+function Spinner({ progress }: { progress: number }) {
+    const stroke = 3;
+    const radius = 20;
+    const normalizedRadius = radius - stroke * 2;
+    const circumference = normalizedRadius * 2 * Math.PI;
+
+    return (
+        <svg width={radius * 2 - 8} height={radius * 2 - 8}>
+            <circle
+                stroke={'rgba(255, 255, 255, 0.07)'}
+                fill={'none'}
+                strokeWidth={stroke}
+                r={normalizedRadius}
+                cx={radius - 4}
+                cy={radius - 4}
+            />
+            <SpinnerCircle
+                stroke={'white'}
+                fill={'none'}
+                strokeDasharray={circumference}
+                strokeWidth={stroke}
+                r={normalizedRadius}
+                cx={radius - 4}
+                cy={radius - 4}
+                style={{ strokeDashoffset: ((100 - progress) / 100) * circumference }}
+            />
+        </svg>
+    );
+}
+
+function FileManagerStatus() {
+    const uploads = ServerContext.useStoreState((state) => state.files.uploads);
+
+    return (
+        <div css={tw`pointer-events-none fixed right-0 bottom-0 z-20 flex justify-center`}>
+            {uploads.length > 0 && (
+                <div
+                    css={tw`flex flex-col justify-center bg-neutral-700 rounded shadow mb-2 mr-2 pointer-events-auto px-3 py-1`}
+                >
+                    {uploads
+                        .sort((a, b) => a.total - b.total)
+                        .map((f) => (
+                            <div key={f.name} css={tw`h-10 flex flex-row items-center`}>
+                                <div css={tw`mr-2`}>
+                                    <Spinner progress={Math.round((100 * f.loaded) / f.total)} />
+                                </div>
+
+                                <div css={tw`block`}>
+                                    <span css={tw`text-base font-normal leading-none text-neutral-300`}>
+                                        {f.name} ({bytesToString(f.loaded)}/{bytesToString(f.total)})
+                                    </span>
+                                </div>
+                            </div>
+                        ))}
+                </div>
+            )}
+        </div>
+    );
+}
+
+export default FileManagerStatus;

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

@@ -7,7 +7,6 @@ import styled from 'styled-components/macro';
 import { ModalMask } from '@/components/elements/Modal';
 import Fade from '@/components/elements/Fade';
 import useEventListener from '@/plugins/useEventListener';
-import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import useFlash from '@/plugins/useFlash';
 import useFileManagerSwr from '@/plugins/useFileManagerSwr';
 import { ServerContext } from '@/state/server';
@@ -19,18 +18,40 @@ const InnerContainer = styled.div`
     ${tw`bg-black w-full border-4 border-primary-500 border-dashed rounded p-10 mx-10`}
 `;
 
+function isFileOrDirectory(event: DragEvent): boolean {
+    if (!event.dataTransfer?.types) {
+        return false;
+    }
+
+    for (let i = 0; i < event.dataTransfer.types.length; i++) {
+        // Check if the item being dragged is not a file.
+        // On Firefox a file of type "application/x-moz-file" is also in the array.
+        if (event.dataTransfer.types[i] !== 'Files' && event.dataTransfer.types[i] !== 'application/x-moz-file') {
+            return false;
+        }
+    }
+
+    return true;
+}
+
 export default ({ className }: WithClassname) => {
     const fileUploadInput = useRef<HTMLInputElement>(null);
-    const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
+    const [timeouts, setTimeouts] = useState<NodeJS.Timeout[]>([]);
     const [visible, setVisible] = useState(false);
-    const [loading, setLoading] = useState(false);
     const { mutate } = useFileManagerSwr();
     const { clearFlashes, clearAndAddHttpError } = useFlash();
+
+    const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
     const directory = ServerContext.useStoreState((state) => state.files.directory);
+    const appendFileUpload = ServerContext.useStoreActions((actions) => actions.files.appendFileUpload);
+    const removeFileUpload = ServerContext.useStoreActions((actions) => actions.files.removeFileUpload);
 
     useEventListener(
         'dragenter',
         (e) => {
+            if (!isFileOrDirectory(e)) {
+                return;
+            }
             e.stopPropagation();
             setVisible(true);
         },
@@ -40,6 +61,9 @@ export default ({ className }: WithClassname) => {
     useEventListener(
         'dragexit',
         (e) => {
+            if (!isFileOrDirectory(e)) {
+                return;
+            }
             e.stopPropagation();
             setVisible(false);
         },
@@ -57,27 +81,47 @@ export default ({ className }: WithClassname) => {
         };
     }, [visible]);
 
-    const onFileSubmission = (files: FileList) => {
-        const form = new FormData();
-        Array.from(files).forEach((file) => form.append('files', file));
+    useEffect(() => {
+        return () => timeouts.forEach(clearTimeout);
+    }, []);
 
-        setLoading(true);
+    const onFileSubmission = (files: FileList) => {
+        const formData: FormData[] = [];
+        Array.from(files).forEach((file) => {
+            const form = new FormData();
+            form.append('files', file);
+            formData.push(form);
+        });
         clearFlashes('files');
-        getFileUploadUrl(uuid)
-            .then((url) =>
-                axios.post(`${url}&directory=${directory}`, form, {
-                    headers: {
-                        'Content-Type': 'multipart/form-data',
-                    },
-                })
+        Promise.all(
+            Array.from(formData).map((f) =>
+                getFileUploadUrl(uuid).then((url) =>
+                    axios.post(`${url}&directory=${directory}`, f, {
+                        headers: { 'Content-Type': 'multipart/form-data' },
+                        onUploadProgress: (data: ProgressEvent) => {
+                            // @ts-expect-error this is valid
+                            const name = f.getAll('files')[0].name;
+
+                            appendFileUpload({
+                                name: name,
+                                loaded: data.loaded,
+                                total: data.total,
+                            });
+
+                            if (data.loaded === data.total) {
+                                const timeout = setTimeout(() => removeFileUpload(name), 2000);
+                                setTimeouts((t) => [...t, timeout]);
+                            }
+                        },
+                    })
+                )
             )
+        )
             .then(() => mutate())
             .catch((error) => {
                 console.error(error);
                 clearAndAddHttpError({ error, key: 'files' });
-            })
-            .then(() => setVisible(false))
-            .then(() => setLoading(false));
+            });
     };
 
     return (
@@ -97,14 +141,13 @@ export default ({ className }: WithClassname) => {
                             onFileSubmission(e.dataTransfer.files);
                         }}
                     >
-                        <div css={tw`w-full flex items-center justify-center`} style={{ pointerEvents: 'none' }}>
+                        <div css={tw`w-full flex items-center justify-center pointer-events-none`}>
                             <InnerContainer>
                                 <p css={tw`text-lg text-neutral-200 text-center`}>Drag and drop files to upload.</p>
                             </InnerContainer>
                         </div>
                     </ModalMask>
                 </Fade>
-                <SpinnerOverlay visible={loading} size={'large'} fixed />
             </Portal>
             <input
                 type={'file'}
@@ -119,12 +162,7 @@ export default ({ className }: WithClassname) => {
                     }
                 }}
             />
-            <Button
-                className={className}
-                onClick={() => {
-                    fileUploadInput.current ? fileUploadInput.current.click() : setVisible(true);
-                }}
-            >
+            <Button className={className} onClick={() => fileUploadInput.current && fileUploadInput.current.click()}>
                 Upload
             </Button>
         </>

resources/scripts/state/server/files.ts

@@ -1,19 +1,30 @@
 import { action, Action } from 'easy-peasy';
 import { cleanDirectoryPath } from '@/helpers';
 
+export interface FileUpload {
+    name: string;
+    loaded: number;
+    readonly total: number;
+}
+
 export interface ServerFileStore {
     directory: string;
     selectedFiles: string[];
+    uploads: FileUpload[];
 
     setDirectory: Action<ServerFileStore, string>;
     setSelectedFiles: Action<ServerFileStore, string[]>;
     appendSelectedFile: Action<ServerFileStore, string>;
     removeSelectedFile: Action<ServerFileStore, string>;
+
+    appendFileUpload: Action<ServerFileStore, FileUpload>;
+    removeFileUpload: Action<ServerFileStore, string>;
 }
 
 const files: ServerFileStore = {
     directory: '/',
     selectedFiles: [],
+    uploads: [],
 
     setDirectory: action((state, payload) => {
         state.directory = cleanDirectoryPath(payload);
@@ -30,6 +41,14 @@ const files: ServerFileStore = {
     removeSelectedFile: action((state, payload) => {
         state.selectedFiles = state.selectedFiles.filter((f) => f !== payload);
     }),
+
+    appendFileUpload: action((state, payload) => {
+        state.uploads = state.uploads.filter((f) => f.name !== payload.name).concat(payload);
+    }),
+
+    removeFileUpload: action((state, payload) => {
+        state.uploads = state.uploads.filter((f) => f.name !== payload);
+    }),
 };
 
 export default files;