diff --git a/web/apps/photos/src/components/PhotoList/dedupe.tsx b/web/apps/photos/src/components/PhotoList/dedupe.tsx
index be412ad78..b911fad37 100644
--- a/web/apps/photos/src/components/PhotoList/dedupe.tsx
+++ b/web/apps/photos/src/components/PhotoList/dedupe.tsx
@@ -19,7 +19,7 @@ import {
} from "react-window";
import { Duplicate } from "services/deduplicationService";
import { EnteFile } from "types/file";
-import { convertBytesToHumanReadable } from "utils/units";
+import { formattedBytes } from "utils/units";
export enum ITEM_TYPE {
TIME = "TIME",
@@ -310,8 +310,7 @@ export function DedupePhotoList({
*/
{listItem.fileCount} {t("FILES")},{" "}
- {convertBytesToHumanReadable(listItem.fileSize || 0)}{" "}
- {t("EACH")}
+ {formattedBytes(listItem.fileSize || 0)} {t("EACH")}
);
case ITEM_TYPE.FILE: {
diff --git a/web/apps/photos/src/components/PhotoList/index.tsx b/web/apps/photos/src/components/PhotoList/index.tsx
index 508e9eab5..f052e4b35 100644
--- a/web/apps/photos/src/components/PhotoList/index.tsx
+++ b/web/apps/photos/src/components/PhotoList/index.tsx
@@ -24,7 +24,7 @@ import {
import { EnteFile } from "types/file";
import { handleSelectCreator } from "utils/photoFrame";
import { PublicCollectionGalleryContext } from "utils/publicCollectionGallery";
-import { convertBytesToHumanReadable } from "utils/units";
+import { formattedBytes } from "utils/units";
const A_DAY = 24 * 60 * 60 * 1000;
const FOOTER_HEIGHT = 90;
@@ -829,8 +829,7 @@ export function PhotoList({
return (
{listItem.fileCount} {t("FILES")},{" "}
- {convertBytesToHumanReadable(listItem.fileSize || 0)}{" "}
- {t("EACH")}
+ {formattedBytes(listItem.fileSize || 0)} {t("EACH")}
);
case ITEM_TYPE.FILE: {
diff --git a/web/apps/photos/src/components/PhotoViewer/FileInfo/RenderFileName.tsx b/web/apps/photos/src/components/PhotoViewer/FileInfo/RenderFileName.tsx
index 7e2786c42..e05eacc07 100644
--- a/web/apps/photos/src/components/PhotoViewer/FileInfo/RenderFileName.tsx
+++ b/web/apps/photos/src/components/PhotoViewer/FileInfo/RenderFileName.tsx
@@ -7,8 +7,8 @@ import VideocamOutlined from "@mui/icons-material/VideocamOutlined";
import Box from "@mui/material/Box";
import { useEffect, useState } from "react";
import { EnteFile } from "types/file";
-import { makeHumanReadableStorage } from "utils/units";
import { changeFileName, updateExistingFilePubMetadata } from "utils/file";
+import { formattedBytes } from "utils/units";
import { FileNameEditDialog } from "./FileNameEditDialog";
import InfoItem from "./InfoItem";
@@ -33,7 +33,7 @@ const getCaption = (file: EnteFile, parsedExifData) => {
captionParts.push(resolution);
}
if (fileSize) {
- captionParts.push(makeHumanReadableStorage(fileSize));
+ captionParts.push(formattedBytes(fileSize));
}
return (
diff --git a/web/apps/photos/src/utils/units.ts b/web/apps/photos/src/utils/units.ts
index 20a90e4c2..79add3b82 100644
--- a/web/apps/photos/src/utils/units.ts
+++ b/web/apps/photos/src/utils/units.ts
@@ -13,10 +13,16 @@ const ONE_GB = 1024 * 1024 * 1024;
export const bytesInGB = (bytes: number, precision = 0): string =>
(bytes / (1024 * 1024 * 1024)).toFixed(precision);
-export function convertBytesToHumanReadable(
- bytes: number,
- precision = 2,
-): string {
+/**
+ * Convert the given number of {@link bytes} to a user visible string in an
+ * appropriately sized unit.
+ *
+ * The returned string includes the (localized) unit suffix, e.g. "TB".
+ *
+ * @param precision Modify the number of digits after the decimal point.
+ * Defaults to 2.
+ */
+export function formattedBytes(bytes: number, precision = 2): string {
if (bytes === 0 || isNaN(bytes)) {
return "0 MB";
}