fix: adds proper filesize formatting

This commit is contained in:
Juan Di Toro 2024-03-27 07:02:21 +01:00
parent c699672737
commit 4afa8f58b9
4 changed files with 57 additions and 5 deletions

View File

@ -45,6 +45,7 @@ import {
TooltipTrigger, TooltipTrigger,
TooltipProvider, TooltipProvider,
} from "./ui/tooltip"; } from "./ui/tooltip";
import filesize from "./lib/filesize";
export const GeneralLayout = ({ children }: React.PropsWithChildren) => { export const GeneralLayout = ({ children }: React.PropsWithChildren) => {
const location = useLocation(); const location = useLocation();
@ -277,7 +278,6 @@ const UploadFileItem = ({
failedState?: FailedUppyFile<Record<string, any>, Record<string, any>>; failedState?: FailedUppyFile<Record<string, any>, Record<string, any>>;
onRemove: (id: string) => void; onRemove: (id: string) => void;
}) => { }) => {
const sizeInMb = bytestoMegabytes(file.size).toFixed(2);
return ( return (
<div className="flex flex-col w-full py-4 px-2 bg-primary-dark"> <div className="flex flex-col w-full py-4 px-2 bg-primary-dark">
<div <div
@ -301,12 +301,12 @@ const UploadFileItem = ({
<span className="truncate text-ellipsis max-w-[20ch]"> <span className="truncate text-ellipsis max-w-[20ch]">
{file.name} {file.name}
</span>{" "} </span>{" "}
<span>({sizeInMb}MB)</span> <span>({filesize(file.size, 2)})</span>
</p> </p>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
<p> <p>
{file.name} ({sizeInMb}MB) {file.name} ({filesize(file.size, 2)})
</p> </p>
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>

View File

@ -0,0 +1,46 @@
// Copied from https://github.com/hustcc/filesize.js
type SPEC = {
readonly radix: number;
readonly unit: string[];
};
const si = {
radix: 1e3,
unit: ["b", "kb", "Mb", "Gb", "Tb", "Pb", "Eb", "Zb", "Yb"],
};
const iec = {
radix: 1024,
unit: ["b", "Kib", "Mib", "Gib", "Tib", "Pib", "Eib", "Zib", "Yib"],
};
const jedec = {
radix: 1024,
unit: ["b", "Kb", "Mb", "Gb", "Tb", "Pb", "Eb", "Zb", "Yb"],
};
export const SPECS = {
si,
iec,
jedec,
} as const;
/**
* file size
* @param bytes Number of file size bytes
* @param fixed Number of decimal, default is 1.
* @param spec String of file size spec, default is jedec. Options: si, iec, jedec.
*/
export default function filesize(bytes: number, fixed = 1, spec: keyof typeof SPECS = "jedec"): string {
let _bytes = Math.abs(bytes);
const { radix, unit } = SPECS[spec];
let loop = 0;
// calculate
while (_bytes >= radix) {
_bytes /= radix;
++loop;
}
return `${bytes.toFixed(fixed)} ${unit[loop]}`;
}

View File

@ -13,6 +13,8 @@ import {
import { cn } from "~/utils"; import { cn } from "~/utils";
import type { FileItem } from "~/data/file-provider"; import type { FileItem } from "~/data/file-provider";
import { usePinning } from "~/hooks/usePinning"; import { usePinning } from "~/hooks/usePinning";
import filesize from "~/components/lib/filesize";
// This type is used to define the shape of our data. // This type is used to define the shape of our data.
// You can use a Zod schema here if you want. // You can use a Zod schema here if you want.
@ -64,6 +66,10 @@ export const columns: ColumnDef<FileItem>[] = [
{ {
accessorKey: "size", accessorKey: "size",
header: "Size", header: "Size",
cell: ({ row }) => {
const size = row.getValue("size");
return size ? filesize(size as number, 2) : "";
},
}, },
{ {
accessorKey: "pinned", accessorKey: "pinned",

View File

@ -16,8 +16,8 @@
"@conform-to/react": "^1.0.2", "@conform-to/react": "^1.0.2",
"@conform-to/zod": "^1.0.2", "@conform-to/zod": "^1.0.2",
"@fontsource-variable/manrope": "^5.0.19", "@fontsource-variable/manrope": "^5.0.19",
"@radix-ui/react-accordion": "^1.1.2",
"@lumeweb/portal-sdk": "0.0.0-20240327035051", "@lumeweb/portal-sdk": "0.0.0-20240327035051",
"@radix-ui/react-accordion": "^1.1.2",
"@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-avatar": "^1.0.4",
"@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dialog": "^1.0.5",