swissmakers_gmbh/swiss-datashare
12
0
Fork 0
mirror of https://github.com/swissmakers/swiss-datashare.git synced 2026-04-21 06:03:13 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add progress indicator for uploading files

Browse Source
This commit is contained in:
Elias Schneider
2022-10-12 23:24:11 +02:00
parent 5a9eb58096
commit 8c84d50159
7 changed files with 77 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/components/upload/FileList.tsx
View File

@@ -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>