feat: add upload history

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>

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: {

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',
+  })
+})