From 2f121ab6586ef1bc876464abd57750a0f3b350d8 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 10 Sep 2025 03:24:07 +0000
Subject: [PATCH] feat: add upload history

This commit introduces an upload history feature.
The user can now see the file name, size, and created date of the last file uploaded.

- A new API endpoint `/api/history` is created to store and retrieve the upload history from the NuxtHub KV store.
- The main page is updated to display the history and to record new uploads after they are completed.
- The NuxtHub KV store is enabled in the configuration.
---
 app/pages/index.vue   | 97 ++++++++++++++++++++++++++++++-------------
 nuxt.config.ts        |  1 +
 server/api/history.ts | 31 ++++++++++++++
 3 files changed, 100 insertions(+), 29 deletions(-)
 create mode 100644 server/api/history.ts

diff --git a/app/pages/index.vue b/app/pages/index.vue
index 9cadb27..8ad586a 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -7,6 +7,8 @@ definePageMeta({
   },
 })
 
+const { data: history, refresh: refreshHistory } = useAsyncData('history', () => $fetch('/api/history'))
+
 const loadingProgress = ref(0)
 const loading = ref(false)
 const toast = useToast()
@@ -35,6 +37,20 @@ async function handleUpload(event: SubmitEvent) {
     throw err
   }).finally(() => { stopProgressSync() })
   loadingProgress.value = 100
+  try {
+    await $fetch('/api/history', {
+      method: 'POST',
+      body: { name: formFile.name, size: formFile.size },
+    })
+    await refreshHistory()
+  }
+  catch (err) {
+    toast.add({
+      title: 'Could not save upload history',
+      description: 'Your file was uploaded, but the history could not be updated.',
+      color: 'orange',
+    })
+  }
   await $fetch('/api/deploy', { method: 'POST' }).catch((err) => {
     toast.add({
       title: 'Deployment trigger failed',
@@ -52,35 +68,58 @@ async function handleUpload(event: SubmitEvent) {
 </script>
 
 <template>
-  <UCard as="section">
-    <template #header>
-      <div class="text-lg font-bold">
-        Upload the reports file here
+  <div class="space-y-4">
+    <UCard v-if="history" as="section">
+      <template #header>
+        <div class="text-lg font-bold">
+          Last Upload
+        </div>
+      </template>
+      <div class="space-y-2">
+        <p>
+          <strong>File name:</strong>
+          {{ history.name }}
+        </p>
+        <p>
+          <strong>Size:</strong>
+          {{ (history.size / 1024 / 1024).toFixed(2) }} MB
+        </p>
+        <p>
+          <strong>Date:</strong>
+          {{ new Date(history.createdAt).toLocaleString() }}
+        </p>
       </div>
-    </template>
-    <form
-      name="upload"
-      method="POST"
-      enctype="multipart/form-data"
-      class="space-y-4"
-      @submit.prevent="handleUpload($event as SubmitEvent)"
-    >
-      <UFormField label="Upload reports file">
-        <UInput type="file" name="file" icon="i-lucide-file-archive" required />
-        <template #help>
-          <span>
-            Upload could take several minutes
-          </span>
-        </template>
-      </UFormField>
-      <UButton
-        icon="i-lucide-upload"
-        type="submit"
-        :loading="loading"
+    </UCard>
+    <UCard as="section">
+      <template #header>
+        <div class="text-lg font-bold">
+          Upload the reports file here
+        </div>
+      </template>
+      <form
+        name="upload"
+        method="POST"
+        enctype="multipart/form-data"
+        class="space-y-4"
+        @submit.prevent="handleUpload($event as SubmitEvent)"
       >
-        Upload file
-      </UButton>
-      <UProgress indicator :color="loadingProgress === 100 ? 'success' : 'primary'" :model-value="loadingProgress" />
-    </form>
-  </UCard>
+        <UFormField label="Upload reports file">
+          <UInput type="file" name="file" icon="i-lucide-file-archive" required />
+          <template #help>
+            <span>
+              Upload could take several minutes
+            </span>
+          </template>
+        </UFormField>
+        <UButton
+          icon="i-lucide-upload"
+          type="submit"
+          :loading="loading"
+        >
+          Upload file
+        </UButton>
+        <UProgress indicator :color="loadingProgress === 100 ? 'success' : 'primary'" :model-value="loadingProgress" />
+      </form>
+    </UCard>
+  </div>
 </template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 9704fa0..978c0cd 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -41,6 +41,7 @@ export default defineNuxtConfig({
   modules: ['@vueuse/nuxt', '@nuxt/eslint', '@nuxt/ui', '@nuxthub/core', 'nuxt-auth-utils'],
   hub: {
     blob: true,
+    kv: true,
   },
   nitro: {
     experimental: {
diff --git a/server/api/history.ts b/server/api/history.ts
new file mode 100644
index 0000000..c6aac86
--- /dev/null
+++ b/server/api/history.ts
@@ -0,0 +1,31 @@
+export default defineEventHandler(async (event) => {
+  await requireUserSession(event)
+  const historyKV = hubKV('history')
+
+  if (event.method === 'POST') {
+    const { name, size } = await readBody(event)
+    if (!name || !size) {
+      throw createError({
+        statusCode: 400,
+        statusMessage: 'Missing name or size',
+      })
+    }
+    const lastUpload = {
+      name,
+      size,
+      createdAt: new Date().toISOString(),
+    }
+    await historyKV.set('last-upload', lastUpload)
+    return lastUpload
+  }
+
+  if (event.method === 'GET') {
+    const lastUpload = await historyKV.get('last-upload')
+    return lastUpload
+  }
+
+  throw createError({
+    statusCode: 405,
+    statusMessage: 'Method not allowed',
+  })
+})