fix(ui): upload file size could not be parsed (#1011)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: ym

ui/src/routes/devices.$id.mount.tsx

@@ -503,6 +503,12 @@ function UrlView({
   );
 }
 
+export interface StorageFile {
+  name: string;
+  size: string;
+  createdAt: Date;
+}
+
 function DeviceFileView({
   onMountStorageFile,
   mountInProgress,
@@ -514,13 +520,7 @@ function DeviceFileView({
   onBack: () => void;
   onNewImageClick: (incompleteFileName?: string) => void;
 }) {
-  const [onStorageFiles, setOnStorageFiles] = useState<
-    {
-      name: string;
-      size: string;
-      createdAt: string;
-    }[]
-  >([]);
+  const [onStorageFiles, setOnStorageFiles] = useState<StorageFile[]>([]);
 
   const [selected, setSelected] = useState<string | null>(null);
   const [usbMode, setUsbMode] = useState<RemoteVirtualMediaState["mode"]>("CDROM");
@@ -565,7 +565,7 @@ function DeviceFileView({
       const formattedFiles = files.map(file => ({
         name: file.filename,
         size: formatters.bytes(file.size),
-        createdAt: formatters.date(new Date(file?.createdAt)),
+        createdAt: new Date(file?.createdAt),
       }));
 
       setOnStorageFiles(formattedFiles);
@@ -582,10 +582,6 @@ function DeviceFileView({
     });
   }, [send, setOnStorageFiles, setStorageSpace]);
 
-  useEffect(() => {
-    syncStorage();
-  }, [syncStorage]);
-
   interface StorageFiles {
     files: {
       filename: string;
@@ -598,7 +594,7 @@ function DeviceFileView({
     syncStorage();
   }, [syncStorage]);
 
-  function handleDeleteFile(file: { name: string; size: string; createdAt: string }) {
+  function handleDeleteFile(file: StorageFile) {
     console.log("Deleting file:", file);
     send("deleteStorageFile", { filename: file.name }, (resp: JsonRpcResponse) => {
       if ("error" in resp) {
@@ -610,7 +606,7 @@ function DeviceFileView({
     });
   }
 
-  function handleOnSelectFile(file: { name: string; size: string; createdAt: string }) {
+  function handleOnSelectFile(file: StorageFile) {
     setSelected(file.name);
     if (file.name.endsWith(".iso")) {
       setUsbMode("CDROM");
@@ -1292,7 +1288,7 @@ function PreUploadedImageItem({
 }: {
   name: string;
   size: string;
-  uploadedAt: string;
+  uploadedAt: Date;
   isSelected: boolean;
   isIncomplete: boolean;
   onSelect: () => void;

ui/src/utils.ts

@@ -1,10 +1,12 @@
 import { KeySequence } from "@hooks/stores";
-import { getLocale , locales } from "@localizations/runtime.js";
+import { getLocale, locales } from "@localizations/runtime.js";
 import { m } from "@localizations/messages.js";
 
+const isInvalidDate = (date: Date) => date instanceof Date && isNaN(date.getTime());
+
 export const formatters = {
   date: (date: Date, options?: Intl.DateTimeFormatOptions) =>
-    new Intl.DateTimeFormat(getLocale() || "en-US", {
+    isInvalidDate(date) ? "Invalid Date" : new Intl.DateTimeFormat(getLocale() || "en-US", {
       year: "numeric",
       month: "long",
       day: "numeric",
@@ -46,14 +48,14 @@ export const formatters = {
       amount: number;
       name: Intl.RelativeTimeFormatUnit;
     }[] = [
-      { amount: 60, name: "seconds" },
-      { amount: 60, name: "minutes" },
-      { amount: 24, name: "hours" },
-      { amount: 7, name: "days" },
-      { amount: 4.34524, name: "weeks" },
-      { amount: 12, name: "months" },
-      { amount: Number.POSITIVE_INFINITY, name: "years" },
-    ];
+        { amount: 60, name: "seconds" },
+        { amount: 60, name: "minutes" },
+        { amount: 24, name: "hours" },
+        { amount: 7, name: "days" },
+        { amount: 4.34524, name: "weeks" },
+        { amount: 12, name: "months" },
+        { amount: Number.POSITIVE_INFINITY, name: "years" },
+      ];
 
     let duration = (date.valueOf() - new Date().valueOf()) / 1000;