From 5441fa6598f9b93e2545a06f1bdc6960afe0aff6 Mon Sep 17 00:00:00 2001
From: BalajiSriraman <balajisrdev@gmail.com>
Date: Tue, 4 Mar 2025 23:25:05 +0530
Subject: [PATCH 1/2] Refactor file and image API endpoints to consolidate file
 management

---
 .../api/{images => files}/[pathname].delete.ts      |  0
 .../api/{fileupload => files}/[pathname].get.ts     |  0
 .../server/api/{fileupload => files}/index.get.ts   |  0
 .../server/api/{fileupload => files}/index.post.ts  |  0
 apps/server/server/api/images/[pathname].get.ts     |  9 ---------
 apps/server/server/api/images/index.get.ts          |  7 -------
 apps/server/server/api/images/upload.post.ts        | 13 -------------
 apps/server/server/routes/images/[pathname].get.ts  |  9 ---------
 8 files changed, 38 deletions(-)
 rename apps/server/server/api/{images => files}/[pathname].delete.ts (100%)
 rename apps/server/server/api/{fileupload => files}/[pathname].get.ts (100%)
 rename apps/server/server/api/{fileupload => files}/index.get.ts (100%)
 rename apps/server/server/api/{fileupload => files}/index.post.ts (100%)
 delete mode 100644 apps/server/server/api/images/[pathname].get.ts
 delete mode 100644 apps/server/server/api/images/index.get.ts
 delete mode 100644 apps/server/server/api/images/upload.post.ts
 delete mode 100644 apps/server/server/routes/images/[pathname].get.ts

diff --git a/apps/server/server/api/images/[pathname].delete.ts b/apps/server/server/api/files/[pathname].delete.ts
similarity index 100%
rename from apps/server/server/api/images/[pathname].delete.ts
rename to apps/server/server/api/files/[pathname].delete.ts
diff --git a/apps/server/server/api/fileupload/[pathname].get.ts b/apps/server/server/api/files/[pathname].get.ts
similarity index 100%
rename from apps/server/server/api/fileupload/[pathname].get.ts
rename to apps/server/server/api/files/[pathname].get.ts
diff --git a/apps/server/server/api/fileupload/index.get.ts b/apps/server/server/api/files/index.get.ts
similarity index 100%
rename from apps/server/server/api/fileupload/index.get.ts
rename to apps/server/server/api/files/index.get.ts
diff --git a/apps/server/server/api/fileupload/index.post.ts b/apps/server/server/api/files/index.post.ts
similarity index 100%
rename from apps/server/server/api/fileupload/index.post.ts
rename to apps/server/server/api/files/index.post.ts
diff --git a/apps/server/server/api/images/[pathname].get.ts b/apps/server/server/api/images/[pathname].get.ts
deleted file mode 100644
index e4b33b2..0000000
--- a/apps/server/server/api/images/[pathname].get.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import z from 'zod'
-
-export default eventHandler(async (event) => {
-  const { pathname } = await getValidatedRouterParams(event, z.object({
-    pathname: z.string().min(1)
-  }).parse)
-
-  return hubBlob().serve(event, pathname)
-})
diff --git a/apps/server/server/api/images/index.get.ts b/apps/server/server/api/images/index.get.ts
deleted file mode 100644
index ff34b7d..0000000
--- a/apps/server/server/api/images/index.get.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export default eventHandler(async () => {
-  const { blobs } = await hubBlob().list({
-    limit: 1000
-  })
-
-  return blobs
-})
diff --git a/apps/server/server/api/images/upload.post.ts b/apps/server/server/api/images/upload.post.ts
deleted file mode 100644
index a84723b..0000000
--- a/apps/server/server/api/images/upload.post.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export default eventHandler(async (event) => {
-  // https://hub.nuxt.com/docs/storage/blob#handleupload
-  return hubBlob().handleUpload(event, {
-    multiple: false,
-    put: {
-      // addRandomSuffix: true,
-    },
-    ensure: {
-      maxSize: "8MB",
-      // types: ['image/jpeg', 'image/png', 'image/gif', 'image/heic', 'image/webp']
-    },
-  });
-});
diff --git a/apps/server/server/routes/images/[pathname].get.ts b/apps/server/server/routes/images/[pathname].get.ts
deleted file mode 100644
index 2590041..0000000
--- a/apps/server/server/routes/images/[pathname].get.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { z } from 'zod'
-
-export default eventHandler(async (event) => {
-  const { pathname } = await getValidatedRouterParams(event, z.object({
-    pathname: z.string().min(1)
-  }).parse)
-
-  return hubBlob().serve(event, pathname)
-})

From f55305ac240ad886bbde8fb7cd39211a11ee8aaf Mon Sep 17 00:00:00 2001
From: BalajiSriraman <balajisrdev@gmail.com>
Date: Tue, 4 Mar 2025 23:27:10 +0530
Subject: [PATCH 2/2] Enhance file management and upload functionality

---
 apps/server/app/app.config.ts                 |  80 +++++-----
 apps/server/app/components/FileUploader.vue   | 141 ++++++++++++++++++
 apps/server/app/pages/index.vue               | 139 +++++++++++++----
 apps/server/app/pages/upload.vue              | 113 +-------------
 apps/server/nuxt.config.ts                    |   2 +-
 .../server/server/api/files/[pathname].get.ts |  18 ++-
 6 files changed, 309 insertions(+), 184 deletions(-)
 create mode 100644 apps/server/app/components/FileUploader.vue

diff --git a/apps/server/app/app.config.ts b/apps/server/app/app.config.ts
index ef9ad46..9871969 100644
--- a/apps/server/app/app.config.ts
+++ b/apps/server/app/app.config.ts
@@ -1,41 +1,41 @@
 export default defineAppConfig({
-  ui: {
-    primary: 'white',
-    gray: 'zinc',
-    button: {
-      color: {
-        gray: {
-          ghost: 'text-gray-400 bg-gray-900 ring-1 ring-gray-400 rounded-full hover:ring-gray-200 hover:text-gray-200 hover:bg-gray-900 transition-hover duration-200'
-        },
-        green: {
-          ghost: 'text-green-400 bg-gray-900 ring-1 ring-green-400 rounded-full hover:ring-green-300 hover:text-green-300 hover:bg-gray-900 transition-hover duration-200'
-        },
-        red: {
-          ghost: 'text-red-400 bg-gray-900 ring-1 ring-red-400 rounded-full hover:ring-red-300 hover:text-red-300 hover:bg-gray-900 transition-hover duration-200'
-        }
-      }
-    },
-    tooltip: {
-      background: 'bg-gray-900',
-      color: 'text-gray-200',
-      ring: 'ring-1 ring-gray-800'
-    },
-    slideover: {
-      background: '',
-      base: 'flex-1 flex flex-col w-full focus:outline-none',
-      overlay: {
-        background: 'bg-gray-200/75 dark:bg-gray-800/50 backdrop-blur-md'
-      }
-    },
-    range: {
-      thumb: {
-        color: 'dark:text-gray-100'
-      },
-      progress: {
-        color: 'dark:text-gray-100',
-        rounded: 'rounded-s-lg',
-        background: 'bg-gray-500 dark:bg-gray-100'
-      }
-    }
-  }
-})
+  // ui: {
+  //   primary: 'white',
+  //   gray: 'zinc',
+  //   button: {
+  //     color: {
+  //       gray: {
+  //         ghost: 'text-gray-400 bg-gray-900 ring-1 ring-gray-400 rounded-full hover:ring-gray-200 hover:text-gray-200 hover:bg-gray-900 transition-hover duration-200'
+  //       },
+  //       green: {
+  //         ghost: 'text-green-400 bg-gray-900 ring-1 ring-green-400 rounded-full hover:ring-green-300 hover:text-green-300 hover:bg-gray-900 transition-hover duration-200'
+  //       },
+  //       red: {
+  //         ghost: 'text-red-400 bg-gray-900 ring-1 ring-red-400 rounded-full hover:ring-red-300 hover:text-red-300 hover:bg-gray-900 transition-hover duration-200'
+  //       }
+  //     }
+  //   },
+  //   tooltip: {
+  //     background: 'bg-gray-900',
+  //     color: 'text-gray-200',
+  //     ring: 'ring-1 ring-gray-800'
+  //   },
+  //   slideover: {
+  //     background: '',
+  //     base: 'flex-1 flex flex-col w-full focus:outline-none',
+  //     overlay: {
+  //       background: 'bg-gray-200/75 dark:bg-gray-800/50 backdrop-blur-md'
+  //     }
+  //   },
+  //   range: {
+  //     thumb: {
+  //       color: 'dark:text-gray-100'
+  //     },
+  //     progress: {
+  //       color: 'dark:text-gray-100',
+  //       rounded: 'rounded-s-lg',
+  //       background: 'bg-gray-500 dark:bg-gray-100'
+  //     }
+  //   }
+  // }
+});
diff --git a/apps/server/app/components/FileUploader.vue b/apps/server/app/components/FileUploader.vue
new file mode 100644
index 0000000..595d628
--- /dev/null
+++ b/apps/server/app/components/FileUploader.vue
@@ -0,0 +1,141 @@
+<template>
+  <div class="w-full">
+    <!-- Upload Zone -->
+    <div
+      class="border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-lg p-8 text-center"
+      @drop.prevent="onDrop"
+      @dragover.prevent
+      @click="triggerFileInput"
+    >
+      <input
+        type="file"
+        ref="fileInputRef"
+        @change="onFileSelect"
+        class="hidden"
+      />
+      <div class="cursor-pointer">
+        <div class="text-gray-500 mb-2">
+          <i class="fas fa-cloud-upload-alt text-3xl"></i>
+        </div>
+        <p class="text-gray-600 dark:text-gray-400">
+          Click to select a file or drag and drop it here
+        </p>
+      </div>
+    </div>
+
+    <!-- File Preview -->
+    <div v-if="file" class="mt-4">
+      <div class="flex items-center justify-between p-2 border-b">
+        <div>
+          <p class="font-medium">{{ file.name }}</p>
+          <p class="text-sm text-gray-500">{{ formatFileSize(file.size) }}</p>
+        </div>
+        <UButton
+          @click="clearFile"
+          color="red"
+          size="xs"
+          variant="ghost"
+          icon="i-heroicons-trash"
+        />
+      </div>
+
+      <!-- Progress Bar -->
+      <div v-if="uploadProgress > 0 || uploadedBytes > 0" class="mt-2">
+        <div class="w-full bg-gray-200 rounded-full h-2.5">
+          <div
+            class="bg-blue-600 h-2.5 rounded-full transition-all duration-300"
+          />
+        </div>
+        <p class="text-sm text-gray-500 mt-1">
+          {{ uploadProgress.toFixed(1) }}% uploaded
+        </p>
+      </div>
+    </div>
+
+    <!-- Upload Button -->
+    <div class="flex justify-end mt-4">
+      <UButton
+        label="Upload File"
+        color="green"
+        :loading="isUploading"
+        :disabled="!file"
+        @click="startUpload"
+      />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+const emit = defineEmits<{
+  (e: "upload-complete"): void;
+  (e: "upload-error", error: Error): void;
+}>();
+
+const fileInputRef = ref<HTMLInputElement | null>(null);
+const file = ref<File | null>(null);
+const isUploading = ref(false);
+const uploadProgress = ref<number>(0);
+const uploadedBytes = ref(0);
+
+const upload = useMultipartUpload("/api/files/multipart");
+
+const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+};
+
+const triggerFileInput = (): void => {
+  fileInputRef.value?.click();
+};
+
+const onFileSelect = (event: Event): void => {
+  const input = event.target as HTMLInputElement;
+  const selectedFile = input.files?.[0];
+  if (selectedFile && selectedFile instanceof File) {
+    file.value = selectedFile;
+    uploadProgress.value = 0;
+    uploadedBytes.value = 0;
+  }
+};
+
+const onDrop = (event: DragEvent): void => {
+  const droppedFile = event.dataTransfer?.files[0];
+  if (droppedFile && droppedFile instanceof File) {
+    file.value = droppedFile;
+    uploadProgress.value = 0;
+    uploadedBytes.value = 0;
+  }
+};
+
+const clearFile = (): void => {
+  file.value = null;
+  uploadProgress.value = 0;
+  uploadedBytes.value = 0;
+  if (fileInputRef.value) {
+    fileInputRef.value.value = "";
+  }
+};
+
+const startUpload = async (): Promise<void> => {
+  if (!file.value || isUploading.value) return;
+
+  isUploading.value = true;
+  const { progress: uploadProgressRef, completed } = upload(file.value);
+
+  watch(uploadProgressRef, (newProgress) => {
+    uploadProgress.value = newProgress;
+  });
+
+  try {
+    await completed;
+    emit("upload-complete");
+  } catch (error) {
+    emit("upload-error", error as Error);
+  } finally {
+    clearFile();
+    isUploading.value = false;
+  }
+};
+</script>
diff --git a/apps/server/app/pages/index.vue b/apps/server/app/pages/index.vue
index 5a0150d..0c6dacd 100644
--- a/apps/server/app/pages/index.vue
+++ b/apps/server/app/pages/index.vue
@@ -1,41 +1,81 @@
 <template>
   <div class="p-5">
-    <div class="flex px-3 py-3.5 border-b border-gray-200 dark:border-gray-700">
-      <UInput v-model="q" placeholder="Filter files..." />
+    <div class="flex justify-between items-center">
+      <div class="ml-auto">
+        <UButton label="Upload File" color="green" size="sm" to="/upload" />
+      </div>
     </div>
+    <div class="h-full w-full pt-5">
+      <div
+        class="flex items-center justify-between gap-5 py-3.5 border-b border-gray-200 dark:border-gray-700"
+      >
+        <UInput v-model="q" placeholder="Filter files..." class="max-w-md" />
 
-    <UTable :rows="filteredRows" :columns="columns">
-      <template #size-data="{ row }">
-        {{ formatFileSize(row.size) }}
-      </template>
-
-      <template #uploadedAt-data="{ row }">
-        {{ formatDate(row.uploadedAt) }}
-      </template>
-
-      <template #actions-data="{ row }">
-        <UButton
-          label="Open in new Tab"
-          color="gray"
-          size="xs"
-          variant="ghost"
-          :to="'/api/fileupload/' + row.pathname"
-          target="_blank"
-        />
-      </template>
-    </UTable>
-
-    <UPagination
-      v-model="page"
-      :total="filteredRows.length"
-      :per-page="perPage"
-      class="mt-4"
-    />
+        <p>
+          <span class="font-bold">Total Files:</span>
+          <span class="pl-2 text-red-600">
+            {{ data?.length }}
+          </span>
+        </p>
+      </div>
+
+      <div class="w-full">
+        <UTable :rows="filteredRows" :columns="columns">
+          <template #pathname-data="{ row }">
+            <div class="max-w-[200px] truncate" :title="row.pathname">
+              {{ row.pathname }}
+            </div>
+          </template>
+
+          <template #size-data="{ row }">
+            {{ formatFileSize(row.size) }}
+          </template>
+
+          <template #uploadedAt-data="{ row }">
+            {{ formatDate(row.uploadedAt) }}
+          </template>
+
+          <template #actions-data="{ row }">
+            <div class="flex space-x-2">
+              <UButton
+                label="View"
+                color="green"
+                size="xs"
+                variant="ghost"
+                :to="'/api/files/' + row.pathname"
+                target="_blank"
+              />
+              <UButton
+                label="Download"
+                color="blue"
+                size="xs"
+                variant="ghost"
+                @click="downloadFile(row.pathname)"
+              />
+              <UButton
+                label="Delete"
+                color="red"
+                size="xs"
+                variant="ghost"
+                @click="deleteFile(row.pathname)"
+              />
+            </div>
+          </template>
+        </UTable>
+      </div>
+
+      <UPagination
+        v-model="page"
+        :total="filteredRows.length"
+        :per-page="perPage"
+        class="mt-4 px-4"
+      />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-const { data } = await useFetch("/api/images/");
+const { data, refresh } = await useFetch("/api/files");
 
 const columns = [
   {
@@ -62,7 +102,7 @@ const columns = [
 
 const q = ref("");
 const page = ref(1);
-const perPage = ref(5);
+const perPage = ref(25);
 
 const formatFileSize = (bytes: number) => {
   if (bytes === 0) return "0 Bytes";
@@ -80,11 +120,46 @@ const formatDate = (date: string) => {
   });
 };
 
+const deleteFile = async (pathname: string) => {
+  try {
+    await $fetch(`/api/files/${pathname}`, { method: "DELETE" });
+    await refresh(); // Refresh the file list after deletion
+  } catch (error) {
+    console.error("Failed to delete file:", error);
+    // Optionally show an error toast/notification
+  }
+};
+
+function downloadFile(path: string): void {
+  const link = document.createElement("a");
+  link.href = window.location.origin + "/api/files/" + path;
+  link.download = getFilenameFromUrl(path);
+
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+// Helper function to extract filename from URL
+function getFilenameFromUrl(url: string): string {
+  try {
+    // Try to get filename from URL path
+    const pathname = new URL(url).pathname;
+    const filename = pathname.split("/").pop();
+
+    // If no filename found, generate a default name based on timestamp
+    return filename || `download-${Date.now()}`;
+  } catch {
+    // Fallback if URL parsing fails
+    return `download-${Date.now()}`;
+  }
+}
+
 const filteredRows = computed(() => {
   let rows = data.value || [];
 
   if (q.value) {
-    rows = rows.filter((file) => {
+    rows = rows.filter((file: { pathname: string; contentType?: string }) => {
       return (
         file.pathname.toLowerCase().includes(q.value.toLowerCase()) ||
         file?.contentType?.toLowerCase().includes(q.value.toLowerCase())
diff --git a/apps/server/app/pages/upload.vue b/apps/server/app/pages/upload.vue
index 6549fdd..11e7bcb 100644
--- a/apps/server/app/pages/upload.vue
+++ b/apps/server/app/pages/upload.vue
@@ -2,115 +2,18 @@
   <div class="p-5">
     <div class="max-w-xl mx-auto">
       <h1 class="text-2xl font-bold mb-4">Upload File</h1>
-
-      <div
-        class="border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-lg p-8 text-center mb-4"
-      >
-        <input
-          type="file"
-          ref="fileInput"
-          @change="handleFileChange"
-          class="hidden"
-        />
-        <div @click="$refs.fileInput.click()" class="cursor-pointer">
-          <div class="text-gray-500 mb-2">
-            <i class="fas fa-cloud-upload-alt text-3xl"></i>
-          </div>
-          <p class="text-gray-600 dark:text-gray-400">
-            Click to select a file or drag and drop it here
-          </p>
-        </div>
-      </div>
-
-      <div v-if="selectedFile" class="mb-4">
-        <h2 class="text-lg font-semibold mb-2">Selected File</h2>
-        <div class="flex items-center justify-between p-2 border-b">
-          <div>
-            <p class="font-medium">{{ selectedFile.name }}</p>
-            <p class="text-sm text-gray-500">
-              {{ formatFileSize(selectedFile.size) }}
-            </p>
-          </div>
-          <UButton
-            @click="removeFile"
-            color="red"
-            size="xs"
-            variant="ghost"
-            icon="i-heroicons-trash"
-          />
-        </div>
-        <div v-if="uploadProgress > 0" class="mt-2">
-          <div class="w-full bg-gray-200 rounded-full h-2.5">
-            <div
-              class="bg-blue-600 h-2.5 rounded-full"
-              :style="{ width: `${uploadProgress}%` }"
-            ></div>
-          </div>
-          <p class="text-sm text-gray-500 mt-1">
-            {{ uploadProgress }}% uploaded
-          </p>
-        </div>
-      </div>
-
-      <div class="flex justify-end">
-        <UButton
-          label="Upload File"
-          color="green"
-          :loading="uploading"
-          :disabled="!selectedFile"
-          @click="uploadFile"
-        />
-      </div>
+      <FileUploader @upload-complete="handleUploadComplete" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-const fileInput = ref<HTMLInputElement | null>(null);
-const selectedFile = ref<File | null>(null);
-const uploading = ref(false);
-const uploadProgress = ref(0);
-
-const formatFileSize = (bytes: number) => {
-  if (bytes === 0) return "0 Bytes";
-  const k = 1024;
-  const sizes = ["Bytes", "KB", "MB", "GB"];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
-};
-
-const handleFileChange = (event: Event) => {
-  const input = event.target as HTMLInputElement;
-  if (input.files && input.files[0]) {
-    selectedFile.value = input.files[0];
-    uploadProgress.value = 0;
-  }
-};
-
-const removeFile = () => {
-  selectedFile.value = null;
-  uploadProgress.value = 0;
-};
-
-const uploadFile = async () => {
-  if (!selectedFile.value) return;
-  uploading.value = true;
-
-  try {
-    const upload = useMultipartUpload("/api/files/multipart");
-    const { progress, completed } = upload(selectedFile.value);
-
-    watch(progress, (newProgress) => {
-      uploadProgress.value = Math.round(newProgress * 100);
-    });
-
-    await completed;
-    selectedFile.value = null;
-    uploadProgress.value = 0;
-  } catch (error) {
-    console.error("Upload failed:", error);
-  } finally {
-    uploading.value = false;
-  }
+const toast = useToast();
+const handleUploadComplete = () => {
+  toast.add({
+    title: "Success",
+    description: "File uploaded successfully",
+    color: "green",
+  });
 };
 </script>
diff --git a/apps/server/nuxt.config.ts b/apps/server/nuxt.config.ts
index 6169700..891a41e 100644
--- a/apps/server/nuxt.config.ts
+++ b/apps/server/nuxt.config.ts
@@ -12,7 +12,7 @@ export default defineNuxtConfig({
   //   },
   // },
   routeRules: {
-    '/api/*': {
+    "/api/*": {
       cors: true,
     },
   },
diff --git a/apps/server/server/api/files/[pathname].get.ts b/apps/server/server/api/files/[pathname].get.ts
index e4b33b2..8562a52 100644
--- a/apps/server/server/api/files/[pathname].get.ts
+++ b/apps/server/server/api/files/[pathname].get.ts
@@ -1,9 +1,15 @@
-import z from 'zod'
+import z from "zod";
 
 export default eventHandler(async (event) => {
-  const { pathname } = await getValidatedRouterParams(event, z.object({
-    pathname: z.string().min(1)
-  }).parse)
+  const { pathname } = await getValidatedRouterParams(
+    event,
+    z.object({
+      pathname: z.string().min(1),
+    }).parse
+  );
 
-  return hubBlob().serve(event, pathname)
-})
+  // Set Content-Disposition header to trigger file download
+  // setHeader(event, "Content-Disposition", `inline;filename=${pathname}`);
+
+  return hubBlob().serve(event, pathname);
+});