diff --git a/components/file/file-list.tsx b/components/file/file-list.tsx
index d71f0fa..b54c40c 100644
--- a/components/file/file-list.tsx
+++ b/components/file/file-list.tsx
@@ -158,25 +158,10 @@ export default function UserFileList({
     }
   };
 
-  if (files?.total === 0) {
-    return (
-      <EmptyPlaceholder className="col-span-full shadow-none">
-        <EmptyPlaceholder.Icon name="fileText" />
-        <EmptyPlaceholder.Title>{t("No Files")}</EmptyPlaceholder.Title>
-        <EmptyPlaceholder.Description>
-          {t("You don't upload any files yet")}
-        </EmptyPlaceholder.Description>
-      </EmptyPlaceholder>
-    );
-  }
-
-  useEffect(() => {
-    handleGetFileShortLinkByIds();
-  }, [files]);
-
   const handleGetFileShortLinkByIds = async () => {
+    if (!files || !files.list) return;
     try {
-      const ids = files?.list.map((f) => f.shortUrlId || "");
+      const ids = files.list.map((f) => f.shortUrlId || "");
       if (!ids?.some((id) => id !== "")) return;
       const response = await fetch(`${action}/r2/short`, {
         method: "POST",
@@ -192,6 +177,22 @@ export default function UserFileList({
     }
   };
 
+  useEffect(() => {
+    handleGetFileShortLinkByIds();
+  }, [files]);
+
+  if (files?.total === 0) {
+    return (
+      <EmptyPlaceholder className="col-span-full shadow-none">
+        <EmptyPlaceholder.Icon name="fileText" />
+        <EmptyPlaceholder.Title>{t("No Files")}</EmptyPlaceholder.Title>
+        <EmptyPlaceholder.Description>
+          {t("You don't upload any files yet")}
+        </EmptyPlaceholder.Description>
+      </EmptyPlaceholder>
+    );
+  }
+
   const renderListView = () => (
     <div className="overflow-hidden rounded-lg border bg-primary-foreground">
       <div className="text-mute-foreground grid grid-cols-6 gap-4 bg-neutral-100 px-6 py-3 text-sm font-medium dark:bg-neutral-800 sm:grid-cols-12">