import axios from 'axios'; import getFileUploadUrl from '@/api/server/files/getFileUploadUrl'; import tw, { styled } from 'twin.macro'; 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'; 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`}; `; export default ({ className }: WithClassname) => { const fileUploadInput = useRef(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 ( <> setVisible(false)} onDragOver={e => e.preventDefault()} onDrop={e => { e.preventDefault(); e.stopPropagation(); setVisible(false); if (!e.dataTransfer?.files.length) return; onFileSubmission(e.dataTransfer.files); }} >

Drag and drop files to upload.

{ if (!e.currentTarget.files) return; onFileSubmission(e.currentTarget.files); if (fileUploadInput.current) { fileUploadInput.current.files = null; } }} /> ); };