Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui(server): add file upload status

Browse source
This commit is contained in:
Matthew Penner 2021-08-03 20:41:28 -06:00
parent 3d3df30903
commit c6dccc568d
6 changed files with 155 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
resources/scripts/components/server/files/FileDropdownMenu.tsx
View file

@ -1,17 +1,6 @@
import React, { memo, useRef, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
faBoxOpen,
faCopy,
faEllipsisH,
faFileArchive,
faFileCode,
faFileDownload,
faLevelUpAlt,
faPencilAlt,
faTrashAlt,
IconDefinition,
} from '@fortawesome/free-solid-svg-icons';
import { 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'}>

2
resources/scripts/components/server/files/FileManagerContainer.tsx
View file

@ -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>
}

65
resources/scripts/components/server/files/FileManagerStatus.tsx Normal file
View file

@ -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;

92
resources/scripts/components/server/files/UploadButton.tsx
View file

@ -6,32 +6,56 @@ 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';
import { WithClassname } from '@/components/types';
const InnerContainer = styled.div`
max-width: 600px;
${tw`bg-black w-full border-4 border-primary-500 border-dashed rounded p-10 mx-10`};
max-width: 600px;
${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) => {
const form = new FormData();
Array.from(files).forEach(file => form.append('files', file));
useEffect(() => {
return () => timeouts.forEach(clearTimeout);
}, []);
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, {
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-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={() => {
fileUploadInput.current
? fileUploadInput.current.click()
: setVisible(true);
}}
onClick={() => fileUploadInput.current && fileUploadInput.current.click()}
>
Upload
</Button>

21
resources/scripts/state/server/files.ts
View file

@ -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;

2
routes/api-client.php
View file

@ -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 () {