File upload status (v2 backport) (#4219)
This commit is contained in:
Boy132
GitHub
parent
2eda1995b9
commit
12242848b0
4 changed files with 156 additions and 25 deletions
|
|
@ -13,6 +13,7 @@ import tw from 'twin.macro';
|
|||
import { Button } from '@/components/elements/button/index';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import useFileManagerSwr from '@/plugins/useFileManagerSwr';
|
||||
import FileManagerStatus from '@/components/server/files/FileManagerStatus';
|
||||
import MassActionsBar from '@/components/server/files/MassActionsBar';
|
||||
import UploadButton from '@/components/server/files/UploadButton';
|
||||
import ServerContentBlock from '@/components/elements/ServerContentBlock';
|
||||
|
|
@ -104,6 +105,7 @@ export default () => {
|
|||
<FileObjectRow key={file.key} file={file} />
|
||||
))}
|
||||
<MassActionsBar />
|
||||
<FileManagerStatus />
|
||||
</div>
|
||||
</CSSTransition>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,72 @@
|
|||
import React from 'react';
|
||||
import tw, { styled } from 'twin.macro';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import { bytesToString } from '@/lib/formatters';
|
||||
|
||||
const SpinnerCircle = styled.circle`
|
||||
transition: stroke-dashoffset 0.35s;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: 50% 50%;
|
||||
`;
|
||||
|
||||
function Spinner({ progress }: { progress: number }) {
|
||||
const stroke = 3;
|
||||
const radius = 20;
|
||||
const normalizedRadius = radius - stroke * 2;
|
||||
const circumference = normalizedRadius * 2 * Math.PI;
|
||||
|
||||
return (
|
||||
<svg width={radius * 2 - 8} height={radius * 2 - 8}>
|
||||
<circle
|
||||
stroke={'rgba(255, 255, 255, 0.07)'}
|
||||
fill={'none'}
|
||||
strokeWidth={stroke}
|
||||
r={normalizedRadius}
|
||||
cx={radius - 4}
|
||||
cy={radius - 4}
|
||||
/>
|
||||
<SpinnerCircle
|
||||
stroke={'white'}
|
||||
fill={'none'}
|
||||
strokeDasharray={circumference}
|
||||
strokeWidth={stroke}
|
||||
r={normalizedRadius}
|
||||
cx={radius - 4}
|
||||
cy={radius - 4}
|
||||
style={{ strokeDashoffset: ((100 - progress) / 100) * circumference }}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function FileManagerStatus() {
|
||||
const uploads = ServerContext.useStoreState((state) => state.files.uploads);
|
||||
|
||||
return (
|
||||
<div css={tw`pointer-events-none fixed right-0 bottom-0 z-20 flex justify-center`}>
|
||||
{uploads.length > 0 && (
|
||||
<div
|
||||
css={tw`flex flex-col justify-center bg-neutral-700 rounded shadow mb-2 mr-2 pointer-events-auto px-3 py-1`}
|
||||
>
|
||||
{uploads
|
||||
.sort((a, b) => a.total - b.total)
|
||||
.map((f) => (
|
||||
<div key={f.name} css={tw`h-10 flex flex-row items-center`}>
|
||||
<div css={tw`mr-2`}>
|
||||
<Spinner progress={Math.round((100 * f.loaded) / f.total)} />
|
||||
</div>
|
||||
|
||||
<div css={tw`block`}>
|
||||
<span css={tw`text-base font-normal leading-none text-neutral-300`}>
|
||||
{f.name} ({bytesToString(f.loaded)}/{bytesToString(f.total)})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default FileManagerStatus;
|
||||
|
|
@ -7,7 +7,6 @@ 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';
|
||||
|
|
@ -19,18 +18,40 @@ const InnerContainer = styled.div`
|
|||
${tw`bg-black w-full border-4 border-primary-500 border-dashed rounded p-10 mx-10`}
|
||||
`;
|
||||
|
||||
function isFileOrDirectory(event: DragEvent): boolean {
|
||||
if (!event.dataTransfer?.types) {
|
||||
return false;
|
||||
}
|
||||
|
||||
for (let i = 0; i < event.dataTransfer.types.length; i++) {
|
||||
// Check if the item being dragged is not a file.
|
||||
// On Firefox a file of type "application/x-moz-file" is also in the array.
|
||||
if (event.dataTransfer.types[i] !== 'Files' && event.dataTransfer.types[i] !== 'application/x-moz-file') {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
export default ({ className }: WithClassname) => {
|
||||
const fileUploadInput = useRef<HTMLInputElement>(null);
|
||||
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
|
||||
const [timeouts, setTimeouts] = useState<NodeJS.Timeout[]>([]);
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const { mutate } = useFileManagerSwr();
|
||||
const { clearFlashes, clearAndAddHttpError } = useFlash();
|
||||
|
||||
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
|
||||
const directory = ServerContext.useStoreState((state) => state.files.directory);
|
||||
const appendFileUpload = ServerContext.useStoreActions((actions) => actions.files.appendFileUpload);
|
||||
const removeFileUpload = ServerContext.useStoreActions((actions) => actions.files.removeFileUpload);
|
||||
|
||||
useEventListener(
|
||||
'dragenter',
|
||||
(e) => {
|
||||
if (!isFileOrDirectory(e)) {
|
||||
return;
|
||||
}
|
||||
e.stopPropagation();
|
||||
setVisible(true);
|
||||
},
|
||||
|
|
@ -40,6 +61,9 @@ export default ({ className }: WithClassname) => {
|
|||
useEventListener(
|
||||
'dragexit',
|
||||
(e) => {
|
||||
if (!isFileOrDirectory(e)) {
|
||||
return;
|
||||
}
|
||||
e.stopPropagation();
|
||||
setVisible(false);
|
||||
},
|
||||
|
|
@ -57,27 +81,47 @@ export default ({ className }: WithClassname) => {
|
|||
};
|
||||
}, [visible]);
|
||||
|
||||
const onFileSubmission = (files: FileList) => {
|
||||
const form = new FormData();
|
||||
Array.from(files).forEach((file) => form.append('files', file));
|
||||
useEffect(() => {
|
||||
return () => timeouts.forEach(clearTimeout);
|
||||
}, []);
|
||||
|
||||
setLoading(true);
|
||||
const onFileSubmission = (files: FileList) => {
|
||||
const formData: FormData[] = [];
|
||||
Array.from(files).forEach((file) => {
|
||||
const form = new FormData();
|
||||
form.append('files', file);
|
||||
formData.push(form);
|
||||
});
|
||||
clearFlashes('files');
|
||||
getFileUploadUrl(uuid)
|
||||
.then((url) =>
|
||||
axios.post(`${url}&directory=${directory}`, form, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
})
|
||||
Promise.all(
|
||||
Array.from(formData).map((f) =>
|
||||
getFileUploadUrl(uuid).then((url) =>
|
||||
axios.post(`${url}&directory=${directory}`, f, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
onUploadProgress: (data: ProgressEvent) => {
|
||||
// @ts-expect-error this is valid
|
||||
const name = f.getAll('files')[0].name;
|
||||
|
||||
appendFileUpload({
|
||||
name: name,
|
||||
loaded: data.loaded,
|
||||
total: data.total,
|
||||
});
|
||||
|
||||
if (data.loaded === data.total) {
|
||||
const timeout = setTimeout(() => removeFileUpload(name), 2000);
|
||||
setTimeouts((t) => [...t, timeout]);
|
||||
}
|
||||
},
|
||||
})
|
||||
)
|
||||
)
|
||||
)
|
||||
.then(() => mutate())
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
clearAndAddHttpError({ error, key: 'files' });
|
||||
})
|
||||
.then(() => setVisible(false))
|
||||
.then(() => setLoading(false));
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -97,14 +141,13 @@ export default ({ className }: WithClassname) => {
|
|||
onFileSubmission(e.dataTransfer.files);
|
||||
}}
|
||||
>
|
||||
<div css={tw`w-full flex items-center justify-center`} style={{ pointerEvents: 'none' }}>
|
||||
<div css={tw`w-full flex items-center justify-center pointer-events-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'}
|
||||
|
|
@ -119,12 +162,7 @@ export default ({ className }: WithClassname) => {
|
|||
}
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
className={className}
|
||||
onClick={() => {
|
||||
fileUploadInput.current ? fileUploadInput.current.click() : setVisible(true);
|
||||
}}
|
||||
>
|
||||
<Button className={className} onClick={() => fileUploadInput.current && fileUploadInput.current.click()}>
|
||||
Upload
|
||||
</Button>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,30 @@
|
|||
import { action, Action } from 'easy-peasy';
|
||||
import { cleanDirectoryPath } from '@/helpers';
|
||||
|
||||
export interface FileUpload {
|
||||
name: string;
|
||||
loaded: number;
|
||||
readonly total: number;
|
||||
}
|
||||
|
||||
export interface ServerFileStore {
|
||||
directory: string;
|
||||
selectedFiles: string[];
|
||||
uploads: FileUpload[];
|
||||
|
||||
setDirectory: Action<ServerFileStore, string>;
|
||||
setSelectedFiles: Action<ServerFileStore, string[]>;
|
||||
appendSelectedFile: Action<ServerFileStore, string>;
|
||||
removeSelectedFile: Action<ServerFileStore, string>;
|
||||
|
||||
appendFileUpload: Action<ServerFileStore, FileUpload>;
|
||||
removeFileUpload: Action<ServerFileStore, string>;
|
||||
}
|
||||
|
||||
const files: ServerFileStore = {
|
||||
directory: '/',
|
||||
selectedFiles: [],
|
||||
uploads: [],
|
||||
|
||||
setDirectory: action((state, payload) => {
|
||||
state.directory = cleanDirectoryPath(payload);
|
||||
|
|
@ -30,6 +41,14 @@ const files: ServerFileStore = {
|
|||
removeSelectedFile: action((state, payload) => {
|
||||
state.selectedFiles = state.selectedFiles.filter((f) => f !== payload);
|
||||
}),
|
||||
|
||||
appendFileUpload: action((state, payload) => {
|
||||
state.uploads = state.uploads.filter((f) => f.name !== payload.name).concat(payload);
|
||||
}),
|
||||
|
||||
removeFileUpload: action((state, payload) => {
|
||||
state.uploads = state.uploads.filter((f) => f.name !== payload);
|
||||
}),
|
||||
};
|
||||
|
||||
export default files;
|
||||
|
|
|
|||
Loading…
Reference in a new issue