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

129 lines
4.3 KiB
TypeScript
Raw Normal View History

import axios from 'axios';
import getFileUploadUrl from '@/api/server/files/getFileUploadUrl';
2020-07-12 21:20:37 +00:00
import tw from 'twin.macro';
import Button from '@/components/elements/Button';
import React, { useEffect, useRef, useState } from 'react';
2020-07-12 21:20:37 +00:00
import styled from 'styled-components/macro';
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 SpinnerOverlay from '@/components/elements/SpinnerOverlay';
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';
2020-07-12 21:20:37 +00:00
const InnerContainer = styled.div`
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
`;
export default () => {
const fileUploadInput = useRef<HTMLInputElement>(null);
2020-08-26 04:39:00 +00:00
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
2020-07-12 21:20:37 +00:00
const [ visible, setVisible ] = useState(false);
2020-08-23 05:35:53 +00:00
const [ loading, setLoading ] = 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();
2020-08-24 17:26:05 +00:00
const directory = ServerContext.useStoreState(state => state.files.directory);
2020-07-12 21:20:37 +00:00
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 ]);
2020-07-12 21:20:37 +00:00
const onFileSubmission = (files: FileList) => {
2020-08-23 05:35:53 +00:00
const form = new FormData();
Array.from(files).forEach(file => form.append('files', file));
2020-08-23 05:35:53 +00:00
setLoading(true);
clearFlashes('files');
getFileUploadUrl(uuid)
2020-08-24 17:26:05 +00:00
.then(url => axios.post(`${url}&directory=${directory}`, form, {
2020-08-23 05:35:53 +00:00
headers: {
'Content-Type': 'multipart/form-data',
},
}))
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' });
})
.then(() => setVisible(false))
.then(() => setLoading(false));
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);
}}
>
<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>
2020-09-10 04:08:34 +00:00
<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;
}
}}
/>
<Button
css={tw`mr-2`}
onClick={() => {
fileUploadInput.current
? fileUploadInput.current.click()
: setVisible(true);
}}
>
2020-07-12 21:20:37 +00:00
Upload
</Button>
</>
);
};