misc_pterodactyl-panel/resources/scripts/components/server/files/UploadButton.tsx

169 lines
5.6 KiB
TypeScript
Raw Normal View History

import axios from 'axios';
import getFileUploadUrl from '@/api/server/files/getFileUploadUrl';
import tw, { styled } from 'twin.macro';
2020-07-12 21:20:37 +00:00
import Button from '@/components/elements/Button';
import React, { useEffect, useRef, useState } from 'react';
import { ModalMask } from '@/components/elements/Modal';
import Fade from '@/components/elements/Fade';
import useEventListener from '@/plugins/useEventListener';
2020-08-23 05:35:53 +00:00
import useFlash from '@/plugins/useFlash';
2020-08-23 05:36:53 +00:00
import useFileManagerSwr from '@/plugins/useFileManagerSwr';
2020-08-24 17:26:05 +00:00
import { ServerContext } from '@/state/server';
import { WithClassname } from '@/components/types';
2020-07-12 21:20:37 +00:00
const InnerContainer = styled.div`
2021-08-04 02:41:28 +00:00
max-width: 600px;
${tw`bg-black w-full border-4 border-primary-500 border-dashed rounded p-10 mx-10`};
2020-07-12 21:20:37 +00:00
`;
2021-08-04 02:41:28 +00:00
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);
2021-08-04 02:41:28 +00:00
const [ timeouts, setTimeouts ] = useState<NodeJS.Timeout[]>([]);
2020-07-12 21:20:37 +00:00
const [ visible, setVisible ] = useState(false);
2020-08-23 05:36:53 +00:00
const { mutate } = useFileManagerSwr();
2020-08-23 05:35:53 +00:00
const { clearFlashes, clearAndAddHttpError } = useFlash();
2021-08-04 02:41:28 +00:00
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
2020-08-24 17:26:05 +00:00
const directory = ServerContext.useStoreState(state => state.files.directory);
2021-08-04 02:41:28 +00:00
const appendFileUpload = ServerContext.useStoreActions(actions => actions.files.appendFileUpload);
const removeFileUpload = ServerContext.useStoreActions(actions => actions.files.removeFileUpload);
2020-07-12 21:20:37 +00:00
useEventListener('dragenter', e => {
2021-08-04 02:41:28 +00:00
if (!isFileOrDirectory(e)) {
return;
}
e.stopPropagation();
setVisible(true);
}, true);
useEventListener('dragexit', e => {
2021-08-04 02:41:28 +00:00
if (!isFileOrDirectory(e)) {
return;
}
e.stopPropagation();
setVisible(false);
}, true);
useEffect(() => {
if (!visible) return;
const hide = () => setVisible(false);
window.addEventListener('keydown', hide);
return () => {
window.removeEventListener('keydown', hide);
};
}, [ visible ]);
2020-07-12 21:20:37 +00:00
2021-08-04 02:41:28 +00:00
useEffect(() => {
return () => timeouts.forEach(clearTimeout);
}, []);
const onFileSubmission = (files: FileList) => {
2021-08-04 02:41:28 +00:00
const formData: FormData[] = [];
Array.from(files).forEach(file => {
const form = new FormData();
form.append('files', file);
formData.push(form);
});
2020-08-23 05:35:53 +00:00
clearFlashes('files');
2021-08-04 02:41:28 +00:00
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 ]);
}
},
}))
)
)
2020-08-23 05:36:53 +00:00
.then(() => mutate())
.catch(error => {
console.error(error);
2020-08-23 05:35:53 +00:00
clearAndAddHttpError({ error, key: 'files' });
2021-08-04 02:41:28 +00:00
});
2020-07-12 21:20:37 +00:00
};
return (
<>
<Fade
appear
in={visible}
timeout={75}
key={'upload_modal_mask'}
unmountOnExit
>
<ModalMask
onClick={() => setVisible(false)}
onDragOver={e => e.preventDefault()}
onDrop={e => {
e.preventDefault();
e.stopPropagation();
setVisible(false);
2020-09-10 04:22:13 +00:00
if (!e.dataTransfer?.files.length) return;
onFileSubmission(e.dataTransfer.files);
}}
>
2021-08-04 02:41:28 +00:00
<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>
<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;
}
}}
/>
<Button
className={className}
2021-08-04 02:41:28 +00:00
onClick={() => fileUploadInput.current && fileUploadInput.current.click()}
>
2020-07-12 21:20:37 +00:00
Upload
</Button>
</>
);
};