misc_pterodactyl-panel/resources/scripts/components/server/files/UploadButton.tsx
2022-06-20 14:16:42 -04:00

132 lines
4.6 KiB
TypeScript

import axios from 'axios';
import getFileUploadUrl from '@/api/server/files/getFileUploadUrl';
import tw from 'twin.macro';
import { Button } from '@/components/elements/button/index';
import React, { useEffect, useRef, useState } from 'react';
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';
import { WithClassname } from '@/components/types';
import Portal from '@/components/elements/Portal';
const InnerContainer = styled.div`
max-width: 600px;
${tw`bg-black w-full border-4 border-primary-500 border-dashed rounded p-10 mx-10`}
`;
export default ({ className }: WithClassname) => {
const fileUploadInput = useRef<HTMLInputElement>(null);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const [ visible, setVisible ] = useState(false);
const [ loading, setLoading ] = useState(false);
const { mutate } = useFileManagerSwr();
const { clearFlashes, clearAndAddHttpError } = useFlash();
const directory = ServerContext.useStoreState(state => state.files.directory);
useEventListener('dragenter', e => {
e.stopPropagation();
setVisible(true);
}, true);
useEventListener('dragexit', e => {
e.stopPropagation();
setVisible(false);
}, true);
useEffect(() => {
if (!visible) return;
const hide = () => setVisible(false);
window.addEventListener('keydown', hide);
return () => {
window.removeEventListener('keydown', hide);
};
}, [ visible ]);
const onFileSubmission = (files: FileList) => {
const form = new FormData();
Array.from(files).forEach(file => form.append('files', file));
setLoading(true);
clearFlashes('files');
getFileUploadUrl(uuid)
.then(url => axios.post(`${url}&directory=${directory}`, form, {
headers: {
'Content-Type': 'multipart/form-data',
},
}))
.then(() => mutate())
.catch(error => {
console.error(error);
clearAndAddHttpError({ error, key: 'files' });
})
.then(() => setVisible(false))
.then(() => setLoading(false));
};
return (
<>
<Portal>
<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);
if (!e.dataTransfer?.files.length) return;
onFileSubmission(e.dataTransfer.files);
}}
>
<div css={tw`w-full flex items-center justify-center`} style={{ pointerEvents: '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'}
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}
onClick={() => {
fileUploadInput.current
? fileUploadInput.current.click()
: setVisible(true);
}}
>
Upload
</Button>
</>
);
};