mirror of
https://github.com/stonith404/pingvin-share.git
synced 2024-10-02 01:20:11 +02:00
feat: add progress indicator for uploading files
This commit is contained in:
parent
5a9eb58096
commit
8c84d50159
@ -152,14 +152,12 @@ const NavBar = () => {
|
||||
const { classes, cx } = useStyles();
|
||||
const items = (
|
||||
<>
|
||||
{(user ? authenticatedLinks : unauthenticatedLinks).map((link) => {
|
||||
{(user ? authenticatedLinks : unauthenticatedLinks).map((link, i) => {
|
||||
if (link.component) {
|
||||
return (
|
||||
<>
|
||||
<Box pl={5} py={15}>
|
||||
{link.component}
|
||||
</Box>
|
||||
</>
|
||||
<Box pl={5} py={15} key={i}>
|
||||
{link.component}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
return (
|
||||
|
@ -1,15 +1,9 @@
|
||||
import {
|
||||
Button,
|
||||
Center,
|
||||
createStyles,
|
||||
Group,
|
||||
Text,
|
||||
useMantineTheme,
|
||||
} from "@mantine/core";
|
||||
import { Button, Center, createStyles, Group, Text } from "@mantine/core";
|
||||
import { Dropzone as MantineDropzone } from "@mantine/dropzone";
|
||||
import getConfig from "next/config";
|
||||
import { Dispatch, ForwardedRef, SetStateAction, useRef } from "react";
|
||||
import { CloudUpload, Upload } from "tabler-icons-react";
|
||||
import { FileUpload } from "../../types/File.type";
|
||||
import { byteStringToHumanSizeString } from "../../utils/math/byteStringToHumanSizeString.util";
|
||||
import toast from "../../utils/toast.util";
|
||||
|
||||
@ -44,9 +38,8 @@ const Dropzone = ({
|
||||
setFiles,
|
||||
}: {
|
||||
isUploading: boolean;
|
||||
setFiles: Dispatch<SetStateAction<File[]>>;
|
||||
setFiles: Dispatch<SetStateAction<FileUpload[]>>;
|
||||
}) => {
|
||||
const theme = useMantineTheme();
|
||||
const { classes } = useStyles();
|
||||
const openRef = useRef<() => void>();
|
||||
return (
|
||||
@ -62,7 +55,11 @@ const Dropzone = ({
|
||||
if (files.length > 100) {
|
||||
toast.error("You can't upload more than 100 files per share.");
|
||||
} else {
|
||||
setFiles(files);
|
||||
const newFiles = files.map((file) => {
|
||||
(file as FileUpload).uploadingProgress = 0;
|
||||
return file as FileUpload;
|
||||
});
|
||||
setFiles(newFiles);
|
||||
}
|
||||
}}
|
||||
className={classes.dropzone}
|
||||
|
@ -1,8 +1,9 @@
|
||||
import { ActionIcon, Loader, Table } from "@mantine/core";
|
||||
import { ActionIcon, Table } from "@mantine/core";
|
||||
import { Dispatch, SetStateAction } from "react";
|
||||
import { CircleCheck, Trash } from "tabler-icons-react";
|
||||
import { Trash } from "tabler-icons-react";
|
||||
import { FileUpload } from "../../types/File.type";
|
||||
import { byteStringToHumanSizeString } from "../../utils/math/byteStringToHumanSizeString.util";
|
||||
import UploadProgressIndicator from "./UploadProgressIndicator";
|
||||
|
||||
const FileList = ({
|
||||
files,
|
||||
@ -15,19 +16,12 @@ const FileList = ({
|
||||
files.splice(index, 1);
|
||||
setFiles([...files]);
|
||||
};
|
||||
|
||||
const rows = files.map((file, i) => (
|
||||
<tr key={i}>
|
||||
<td>{file.name}</td>
|
||||
<td>{byteStringToHumanSizeString(file.size.toString())}</td>
|
||||
<td>
|
||||
{file.uploadingState ? (
|
||||
file.uploadingState != "finished" ? (
|
||||
<Loader size={22} />
|
||||
) : (
|
||||
<CircleCheck color="green" size={22} />
|
||||
)
|
||||
) : (
|
||||
{file.uploadingProgress == 0 ? (
|
||||
<ActionIcon
|
||||
color="red"
|
||||
variant="light"
|
||||
@ -36,6 +30,8 @@ const FileList = ({
|
||||
>
|
||||
<Trash />
|
||||
</ActionIcon>
|
||||
) : (
|
||||
<UploadProgressIndicator progress={file.uploadingProgress} />
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
|
20
frontend/src/components/upload/UploadProgressIndicator.tsx
Normal file
20
frontend/src/components/upload/UploadProgressIndicator.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
import { RingProgress } from "@mantine/core";
|
||||
import { CircleCheck, CircleX } from "tabler-icons-react";
|
||||
|
||||
const UploadProgressIndicator = ({ progress }: { progress: number }) => {
|
||||
if (progress > 0 && progress < 100) {
|
||||
return (
|
||||
<RingProgress
|
||||
sections={[{ value: progress, color: "victoria" }]}
|
||||
thickness={3}
|
||||
size={25}
|
||||
/>
|
||||
);
|
||||
} else if (progress == 100) {
|
||||
return <CircleCheck color="green" size={22} />;
|
||||
} else {
|
||||
return <CircleX color="red" size={22} />;
|
||||
}
|
||||
};
|
||||
|
||||
export default UploadProgressIndicator;
|
@ -28,39 +28,47 @@ const Upload = () => {
|
||||
security: ShareSecurity
|
||||
) => {
|
||||
setisUploading(true);
|
||||
|
||||
try {
|
||||
files.forEach((file) => {
|
||||
file.uploadingState = "inProgress";
|
||||
});
|
||||
setFiles([...files]);
|
||||
setFiles((files) =>
|
||||
files.map((file) => {
|
||||
file.uploadingProgress = 1;
|
||||
return file;
|
||||
})
|
||||
);
|
||||
const share = await shareService.create(id, expiration, security);
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
await shareService.uploadFile(share.id, files[i]);
|
||||
const progressCallBack = (bytesProgress: number) => {
|
||||
setFiles((files) => {
|
||||
return files.map((file, callbackIndex) => {
|
||||
if (i == callbackIndex) {
|
||||
file.uploadingProgress = Math.round(
|
||||
(100 * bytesProgress) / files[i].size
|
||||
);
|
||||
}
|
||||
return file;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
files[i].uploadingState = "finished";
|
||||
setFiles([...files]);
|
||||
if (!files.some((f) => f.uploadingState == "inProgress")) {
|
||||
try {
|
||||
await shareService.uploadFile(share.id, files[i], progressCallBack);
|
||||
} catch {
|
||||
files[i].uploadingProgress = -1;
|
||||
}
|
||||
|
||||
if (!files.some((f) => f.uploadingProgress != 100)) {
|
||||
await shareService.completeShare(share.id);
|
||||
setisUploading(false);
|
||||
showCompletedUploadModal(
|
||||
modals,
|
||||
|
||||
share
|
||||
);
|
||||
showCompletedUploadModal(modals, share);
|
||||
setFiles([]);
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
files.forEach((file) => {
|
||||
file.uploadingState = undefined;
|
||||
});
|
||||
if (axios.isAxiosError(e)) {
|
||||
toast.error(e.response?.data?.message ?? "An unkown error occured.");
|
||||
} else {
|
||||
toast.error("An unkown error occured.");
|
||||
}
|
||||
setFiles([...files]);
|
||||
setisUploading(false);
|
||||
}
|
||||
};
|
||||
|
@ -68,10 +68,20 @@ const downloadFile = async (shareId: string, fileId: string) => {
|
||||
window.location.href = await getFileDownloadUrl(shareId, fileId);
|
||||
};
|
||||
|
||||
const uploadFile = async (shareId: string, file: File) => {
|
||||
const uploadFile = async (
|
||||
shareId: string,
|
||||
file: File,
|
||||
progressCallBack: (uploadingProgress: number) => void
|
||||
) => {
|
||||
var formData = new FormData();
|
||||
formData.append("file", file);
|
||||
return (await api.post(`shares/${shareId}/files`, formData)).data;
|
||||
|
||||
return (
|
||||
await api.post(`shares/${shareId}/files`, formData, {
|
||||
onUploadProgress: (progressEvent) =>
|
||||
progressCallBack(progressEvent.loaded),
|
||||
})
|
||||
).data;
|
||||
};
|
||||
|
||||
export default {
|
||||
|
@ -1,2 +1 @@
|
||||
export type FileUpload = File & { uploadingState?: UploadState };
|
||||
export type UploadState = "finished" | "inProgress" | undefined;
|
||||
export type FileUpload = File & { uploadingProgress: number };
|
||||
|
Loading…
Reference in New Issue
Block a user