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