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

ui(server): fix file uploads being canceled instead of completed

Browse source
This commit is contained in:
Matthew Penner 2022-12-04 16:36:53 -07:00
parent 158facd534
commit 598c956e4e
No known key found for this signature in database
3 changed files with 25 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
resources/scripts/components/server/files/FileManagerStatus.tsx
View file

@ -32,7 +32,7 @@ const Spinner = ({ progress, className }: { progress: number; className?: string
const FileUploadList = () => { const FileUploadList = () => {
const { close } = useContext(DialogWrapperContext); const { close } = useContext(DialogWrapperContext);
const removeFileUpload = ServerContext.useStoreActions((actions) => actions.files.removeFileUpload); const cancelFileUpload = ServerContext.useStoreActions((actions) => actions.files.cancelFileUpload);
const clearFileUploads = ServerContext.useStoreActions((actions) => actions.files.clearFileUploads); const clearFileUploads = ServerContext.useStoreActions((actions) => actions.files.clearFileUploads);
const uploads = ServerContext.useStoreState((state) => const uploads = ServerContext.useStoreState((state) =>
Object.entries(state.files.uploads).sort(([a], [b]) => a.localeCompare(b)) Object.entries(state.files.uploads).sort(([a], [b]) => a.localeCompare(b))
@ -49,7 +49,7 @@ const FileUploadList = () => {
</Tooltip> </Tooltip>
<Code className={'flex-1 truncate'}>{name}</Code> <Code className={'flex-1 truncate'}>{name}</Code>
<button <button
onClick={removeFileUpload.bind(this, name)} onClick={cancelFileUpload.bind(this, name)}
className={'text-gray-500 hover:text-gray-200 transition-colors duration-75'} className={'text-gray-500 hover:text-gray-200 transition-colors duration-75'}
> >
<XIcon className={'w-5 h-5'} /> <XIcon className={'w-5 h-5'} />

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

@ -59,9 +59,6 @@ export default ({ className }: WithClassname) => {
const onUploadProgress = (data: ProgressEvent, name: string) => { const onUploadProgress = (data: ProgressEvent, name: string) => {
setUploadProgress({ name, loaded: data.loaded }); setUploadProgress({ name, loaded: data.loaded });
if (data.loaded >= data.total) {
timeouts.value.push(setTimeout(() => removeFileUpload(name), 500));
}
}; };
const onFileSubmission = (files: FileList) => { const onFileSubmission = (files: FileList) => {
@ -73,20 +70,25 @@ export default ({ className }: WithClassname) => {
const uploads = list.map((file) => { const uploads = list.map((file) => {
const controller = new AbortController(); const controller = new AbortController();
pushFileUpload({ name: file.name, data: { abort: controller, loaded: 0, total: file.size } }); pushFileUpload({
name: file.name,
data: { abort: controller, loaded: 0, total: file.size },
});
return () => return () =>
getFileUploadUrl(uuid).then((url) => getFileUploadUrl(uuid).then((url) =>
axios.post( axios
url, .post(
{ files: file }, url,
{ { files: file },
signal: controller.signal, {
headers: { 'Content-Type': 'multipart/form-data' }, signal: controller.signal,
params: { directory }, headers: { 'Content-Type': 'multipart/form-data' },
onUploadProgress: (data) => onUploadProgress(data, file.name), params: { directory },
} onUploadProgress: (data) => onUploadProgress(data, file.name),
) }
)
.then(() => timeouts.value.push(setTimeout(() => removeFileUpload(file.name), 500)))
); );
}); });

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

@ -21,6 +21,7 @@ export interface ServerFileStore {
setUploadProgress: Action<ServerFileStore, { name: string; loaded: number }>; setUploadProgress: Action<ServerFileStore, { name: string; loaded: number }>;
clearFileUploads: Action<ServerFileStore>; clearFileUploads: Action<ServerFileStore>;
removeFileUpload: Action<ServerFileStore, string>; removeFileUpload: Action<ServerFileStore, string>;
cancelFileUpload: Action<ServerFileStore, string>;
} }
const files: ServerFileStore = { const files: ServerFileStore = {
@ -61,6 +62,12 @@ const files: ServerFileStore = {
}), }),
removeFileUpload: action((state, payload) => { removeFileUpload: action((state, payload) => {
if (state.uploads[payload]) {
delete state.uploads[payload];
}
}),
cancelFileUpload: action((state, payload) => {
if (state.uploads[payload]) { if (state.uploads[payload]) {
// Abort the request if it is still in flight. If it already completed this is // Abort the request if it is still in flight. If it already completed this is
// a no-op. // a no-op.