parent
a4f6870518
commit
df9a7f71f9
6 changed files with 92 additions and 50 deletions
|
@ -2,7 +2,7 @@ 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 React, { useEffect, useRef } from 'react';
|
||||
import { ModalMask } from '@/components/elements/Modal';
|
||||
import Fade from '@/components/elements/Fade';
|
||||
import useEventListener from '@/plugins/useEventListener';
|
||||
|
@ -12,6 +12,7 @@ import { ServerContext } from '@/state/server';
|
|||
import { WithClassname } from '@/components/types';
|
||||
import Portal from '@/components/elements/Portal';
|
||||
import { CloudUploadIcon } from '@heroicons/react/outline';
|
||||
import { useSignal } from '@preact/signals-react';
|
||||
|
||||
function isFileOrDirectory(event: DragEvent): boolean {
|
||||
if (!event.dataTransfer?.types) {
|
||||
|
@ -23,14 +24,16 @@ function isFileOrDirectory(event: DragEvent): boolean {
|
|||
|
||||
export default ({ className }: WithClassname) => {
|
||||
const fileUploadInput = useRef<HTMLInputElement>(null);
|
||||
const [timeouts, setTimeouts] = useState<NodeJS.Timeout[]>([]);
|
||||
const [visible, setVisible] = useState(false);
|
||||
|
||||
const visible = useSignal(false);
|
||||
const timeouts = useSignal<NodeJS.Timeout[]>([]);
|
||||
|
||||
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(
|
||||
const { clearFileUploads, removeFileUpload, pushFileUpload, setUploadProgress } = ServerContext.useStoreActions(
|
||||
(actions) => actions.files
|
||||
);
|
||||
|
||||
|
@ -40,27 +43,24 @@ export default ({ className }: WithClassname) => {
|
|||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (isFileOrDirectory(e)) {
|
||||
return setVisible(true);
|
||||
visible.value = true;
|
||||
}
|
||||
},
|
||||
{ capture: true }
|
||||
);
|
||||
|
||||
useEventListener('dragexit', () => setVisible(false), { capture: true });
|
||||
useEventListener('dragexit', () => (visible.value = false), { capture: true });
|
||||
|
||||
useEventListener('keydown', () => {
|
||||
visible && setVisible(false);
|
||||
});
|
||||
useEventListener('keydown', () => (visible.value = false));
|
||||
|
||||
useEffect(() => {
|
||||
return () => timeouts.forEach(clearTimeout);
|
||||
return () => timeouts.value.forEach(clearTimeout);
|
||||
}, []);
|
||||
|
||||
const onUploadProgress = (data: ProgressEvent, name: string) => {
|
||||
appendFileUpload({ name, loaded: data.loaded, total: data.total });
|
||||
setUploadProgress({ name, loaded: data.loaded });
|
||||
if (data.loaded >= data.total) {
|
||||
const timeout = setTimeout(() => removeFileUpload(name), 500);
|
||||
setTimeouts((t) => [...t, timeout]);
|
||||
timeouts.value.push(setTimeout(() => removeFileUpload(name), 500));
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -71,23 +71,20 @@ export default ({ className }: WithClassname) => {
|
|||
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 });
|
||||
const controller = new AbortController();
|
||||
pushFileUpload({ name: file.name, data: { abort: controller, loaded: 0, total: file.size } });
|
||||
|
||||
return () =>
|
||||
getFileUploadUrl(uuid).then((url) =>
|
||||
axios.post(
|
||||
url,
|
||||
{ files: file },
|
||||
{
|
||||
signal: controller.signal,
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
params: { directory },
|
||||
onUploadProgress: (data) => {
|
||||
onUploadProgress(data, file.name);
|
||||
},
|
||||
onUploadProgress: (data) => onUploadProgress(data, file.name),
|
||||
}
|
||||
)
|
||||
);
|
||||
|
@ -104,15 +101,15 @@ export default ({ className }: WithClassname) => {
|
|||
return (
|
||||
<>
|
||||
<Portal>
|
||||
<Fade appear in={visible} timeout={75} key={'upload_modal_mask'} unmountOnExit>
|
||||
<Fade appear in={visible.value} timeout={75} key={'upload_modal_mask'} unmountOnExit>
|
||||
<ModalMask
|
||||
onClick={() => setVisible(false)}
|
||||
onClick={() => (visible.value = false)}
|
||||
onDragOver={(e) => e.preventDefault()}
|
||||
onDrop={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
setVisible(false);
|
||||
visible.value = false;
|
||||
if (!e.dataTransfer?.files.length) return;
|
||||
|
||||
onFileSubmission(e.dataTransfer.files);
|
||||
|
|
Reference in a new issue