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 { ModalMask } from '@/components/elements/Modal'; import Fade from '@/components/elements/Fade'; import useEventListener from '@/plugins/useEventListener'; import { useFlashKey } from '@/plugins/useFlash'; import useFileManagerSwr from '@/plugins/useFileManagerSwr'; import { ServerContext } from '@/state/server'; import { WithClassname } from '@/components/types'; import Portal from '@/components/elements/Portal'; import { CloudUploadIcon } from '@heroicons/react/outline'; function isFileOrDirectory(event: DragEvent): boolean { if (!event.dataTransfer?.types) { return false; } return event.dataTransfer.types.some((value) => value.toLowerCase() === 'files'); } export default ({ className }: WithClassname) => { const fileUploadInput = useRef(null); const [timeouts, setTimeouts] = useState([]); const [visible, setVisible] = useState(false); const { mutate } = useFileManagerSwr(); const { addError, clearAndAddHttpError } = useFlashKey('files'); const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid); const directory = ServerContext.useStoreState((state) => state.files.directory); const { clearFileUploads, appendFileUpload, removeFileUpload } = ServerContext.useStoreActions( (actions) => actions.files ); useEventListener( 'dragenter', (e) => { e.preventDefault(); e.stopPropagation(); if (isFileOrDirectory(e)) { return setVisible(true); } }, { capture: true } ); useEventListener('dragexit', () => setVisible(false), { capture: true }); useEventListener('keydown', () => { visible && setVisible(false); }); useEffect(() => { return () => timeouts.forEach(clearTimeout); }, []); const onUploadProgress = (data: ProgressEvent, name: string) => { appendFileUpload({ name, loaded: data.loaded, total: data.total }); if (data.loaded >= data.total) { const timeout = setTimeout(() => removeFileUpload(name), 500); setTimeouts((t) => [...t, timeout]); } }; const onFileSubmission = (files: FileList) => { clearAndAddHttpError(); const list = Array.from(files); if (list.some((file) => !file.type && file.size % 4096 === 0)) { return addError('Folder uploads are not supported at this time.', 'Error'); } if (!list.length) { return; } const uploads = list.map((file) => { appendFileUpload({ name: file.name, loaded: 0, total: file.size }); return () => getFileUploadUrl(uuid).then((url) => axios.post( url, { files: file }, { headers: { 'Content-Type': 'multipart/form-data' }, params: { directory }, onUploadProgress: (data) => { onUploadProgress(data, file.name); }, } ) ); }); Promise.all(uploads.map((fn) => fn())) .then(() => mutate()) .catch((error) => { clearFileUploads(); clearAndAddHttpError(error); }); }; 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; } }} multiple /> ); };