ui(server): add file upload status

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

@@ -1,17 +1,6 @@
 import React, { memo, useRef, useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import {
+import { faBoxOpen, faCopy, faEllipsisH, faFileArchive, faFileCode, faFileDownload, faLevelUpAlt, faPencilAlt, faTrashAlt, IconDefinition } from '@fortawesome/free-solid-svg-icons';
-    faBoxOpen,
-    faCopy,
-    faEllipsisH,
-    faFileArchive,
-    faFileCode,
-    faFileDownload,
-    faLevelUpAlt,
-    faPencilAlt,
-    faTrashAlt,
-    IconDefinition,
-} from '@fortawesome/free-solid-svg-icons';
 import RenameFileModal from '@/components/server/files/RenameFileModal';
 import { ServerContext } from '@/state/server';
 import { join } from 'path';
@@ -115,7 +104,7 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
             .then(() => setShowSpinner(false));
     };
 
-    const doUnarchive = () => {
+    const doExtraction = () => {
         setShowSpinner(true);
         clearFlashes('files');
 
@@ -175,7 +164,7 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
                 }
                 {file.isArchiveType() ?
                     <Can action={'file.create'}>
-                        <Row onClick={doUnarchive} icon={faBoxOpen} title={'Unarchive'}/>
+                        <Row onClick={doExtraction} icon={faBoxOpen} title={'Extract'}/>
                     </Can>
                     :
                     <Can action={'file.archive'}>

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

@@ -13,6 +13,7 @@ import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
 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';
@@ -123,6 +124,7 @@ export default () => {
                                         ))
                                     }
                                     <MassActionsBar/>
+                                    <FileManagerStatus/>
                                 </div>
                             </CSSTransition>
                         }

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import tw, { styled } from 'twin.macro';
+import { ServerContext } from '@/state/server';
+
+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}</span>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            }
+        </div>
+    );
+}
+
+export default FileManagerStatus;

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

@@ -6,7 +6,6 @@ import React, { useEffect, useRef, useState } from 'react';
 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';
@@ -17,21 +16,46 @@ 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.
+        if (event.dataTransfer.types[i] !== 'Files') {
+            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);
     }, true);
 
     useEventListener('dragexit', e => {
+        if (!isFileOrDirectory(e)) {
+            return;
+        }
         e.stopPropagation();
         setVisible(false);
     }, true);
@@ -47,25 +71,47 @@ export default ({ className }: WithClassname) => {
         };
     }, [ visible ]);
 
-    const onFileSubmission = (files: FileList) => {
+    useEffect(() => {
-        const form = new FormData();
+        return () => timeouts.forEach(clearTimeout);
-        Array.from(files).forEach(file => form.append('files', file));
+    }, []);
+
+    const onFileSubmission = (files: FileList) => {
+        const formData: FormData[] = [];
+        Array.from(files).forEach(file => {
+            const form = new FormData();
+            form.append('files', file);
+            formData.push(form);
+        });
 
-        setLoading(true);
         clearFlashes('files');
-        getFileUploadUrl(uuid)
+
-            .then(url => axios.post(`${url}&directory=${directory}`, form, {
+        Promise.all(
-                headers: {
+            Array.from(formData).map(f => getFileUploadUrl(uuid)
-                    'Content-Type': 'multipart/form-data',
+                .then(url => axios.post(`${url}&directory=${directory}`, f, {
+                    headers: { 'Content-Type': 'multipart/form-data' },
+                    onUploadProgress: (data: ProgressEvent) => {
+                        // @ts-ignore
+                        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), 5000);
+                            setTimeouts(t => [ ...t, timeout ]);
+                        }
                     },
                 }))
+            )
+        )
             .then(() => mutate())
             .catch(error => {
                 console.error(error);
                 clearAndAddHttpError({ error, key: 'files' });
-            })
+            });
-            .then(() => setVisible(false))
-            .then(() => setLoading(false));
     };
 
     return (
@@ -90,7 +136,7 @@ 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.
@@ -99,14 +145,12 @@ export default ({ className }: WithClassname) => {
                     </div>
                 </ModalMask>
             </Fade>
-            <SpinnerOverlay visible={loading} size={'large'} fixed/>
             <input
                 type={'file'}
                 ref={fileUploadInput}
                 css={tw`hidden`}
                 onChange={e => {
                     if (!e.currentTarget.files) return;
-
                     onFileSubmission(e.currentTarget.files);
                     if (fileUploadInput.current) {
                         fileUploadInput.current.files = null;
@@ -115,11 +159,7 @@ export default ({ className }: WithClassname) => {
             />
             <Button
                 className={className}
-                onClick={() => {
+                onClick={() => fileUploadInput.current && fileUploadInput.current.click()}
-                    fileUploadInput.current
-                        ? fileUploadInput.current.click()
-                        : setVisible(true);
-                }}
             >
                 Upload
             </Button>

resources/scripts/state/server/files.ts

@@ -1,35 +1,50 @@
 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);
     }),
-
     setSelectedFiles: action((state, payload) => {
         state.selectedFiles = payload;
     }),
-
     appendSelectedFile: action((state, payload) => {
         state.selectedFiles = state.selectedFiles.filter(f => f !== payload).concat(payload);
     }),
-
     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;

routes/api-client.php

@@ -77,7 +77,7 @@ Route::group(['prefix' => '/servers/{server}', 'middleware' => [AuthenticateServ
         Route::post('/create-folder', [Client\Servers\FileController::class, 'create']);
         Route::post('/chmod', [Client\Servers\FileController::class, 'chmod']);
         Route::post('/pull', [Client\Servers\FileController::class, 'pull'])->middleware(['throttle:pull']);
-        Route::get('/upload', [Client\Servers\FileUploadController::class]);
+        Route::get('/upload', [Client\Servers\FileUploadController::class, '__invoke']);
     });
 
     Route::group(['prefix' => '/schedules'], function () {