fix: file upload issues & chores (#681)

q1zhen · web-flow · commit fd872027c0f5 · 2025-01-09T23:31:19.000+08:00
* fix: fixed linting and typo

* fix(minor)!: renamed api endpoints

* chore: types
diff --git a/app/components/custom/club-file-upload.vue b/app/components/custom/club-file-upload.vue
@@ -1,8 +1,4 @@
 <script setup lang="ts">
-import type { FileCollection } from '@prisma/client'
-import type { AllClubs } from '~~/types/api/user/all_clubs'
-import Toaster from '@/components/ui/toast/Toaster.vue'
-import { useToast } from '@/components/ui/toast/use-toast'
 import { toTypedSchema } from '@vee-validate/zod'
 import dayjs from 'dayjs'
 import { v4 as uuidv4 } from 'uuid'
@@ -32,6 +28,19 @@ definePageMeta({
   middleware: ['auth'],
 })
 
+const form = useForm({}) // The form
+const inputKey = ref(uuidv4()) // To force update the <Input file>
+const currentClubData: Ref<Record<string, any> | null> = ref(null) // Data for the current club's record
+const msg = ref('') // Message (time / status) shown at the bottom of the card
+
+const clubUpdating = ref(false) // Flag for club data updating
+const submitting = ref(false) // Flag for file submission
+const downloading = ref(false) // Flag for downloading file
+
+const dlink: Ref<HTMLElement | null> = ref(null) // The <a> element
+const downloadLink = ref('') // The data url to be filled in <a>
+const downloadFilename = ref('') // The filename to be filled in <a>
+
 function fileTypesPrompt(fileTypes: string[]) {
   if (fileTypes.length === 0 || fileTypes.includes('*')) {
     return '无文件类型限制'
@@ -54,7 +63,6 @@ function fileTypesAcceptAttr(fileTypes: string[]) {
 //   file: z.custom(v => v, 'File missing'),
 // }))
 
-// 滚一边去
 function readFileAsDataURL(file: File) {
   return new Promise((resolve, reject) => {
     const reader = new FileReader()
@@ -64,60 +72,51 @@ function readFileAsDataURL(file: File) {
   })
 }
 
-const form = useForm({})
-const inputKey = ref(uuidv4())
-const submitting = ref(false)
 const onSubmit = form.handleSubmit(async (values) => {
   submitting.value = true
-  await $fetch('/api/files/newRecord', {
+  const fileName = values.file.name
+  const status = await $fetch('/api/files/new-record', {
     method: 'POST',
     body: {
       clubId: Number.parseInt(props.club),
       collectionId: props.collection,
       fileContent: await readFileAsDataURL(values.file),
-      rawName: values.file.name,
+      rawName: fileName,
     },
   })
   form.resetForm()
   inputKey.value = uuidv4()
-  await updateClub()
+  msg.value = (status && status.success) ? `${fileName} (提交成功)` : '提交失败'
   submitting.value = false
 })
 
-const downloadLink = ref('')
-const downloadFilename = ref('')
-const msg = ref('')
-const currentClubData = ref(null)
-const clubUpdating = ref(false)
 async function updateClub() {
   downloadLink.value = ''
   downloadFilename.value = ''
   if (!props.club) {
     msg.value = '请先选择一个社团'
-    currentClubData.value = undefined
+    currentClubData.value = null
     return
   }
   clubUpdating.value = true
-  const data = await $fetch('/api/files/clubRecords', {
+  const data = await $fetch('/api/files/club-records', {
     method: 'POST',
     body: {
-      cludId: Number.parseInt(props.club),
+      clubId: Number.parseInt(props.club),
       collection: props.collection,
     },
   })
-  if (data && data.length !== 0) {
-    msg.value = `最后提交于 ${dayjs(data[0].createdAt).fromNow()}`
+  if (data[0] && data.length !== 0) {
+    msg.value = `${data[0].file.name} (${dayjs(data[0].createdAt).fromNow()})`
     currentClubData.value = data[0]
   }
   else {
     msg.value = '尚未提交'
-    currentClubData.value = undefined
+    currentClubData.value = null
   }
   clubUpdating.value = false
 }
 
-const dlink: Ref<HTMLElement | null> = ref(null)
-const downloading = ref(false)
 async function download() {
   if (currentClubData.value) {
     downloading.value = true
@@ -130,12 +129,14 @@ async function download() {
     // const blob = new Blob([new Uint8Array(Array.from(atob(data), c => c.charCodeAt(0)))])
     // window.open(URL.createObjectURL(blob))
     // window.open(data)
-    downloadLink.value = data.url
-    downloadFilename.value = data.name
-    nextTick(() => {
-      dlink.value.click()
-    })
-    downloading.value = false
+    if (typeof data.url === 'string' && typeof data.name === 'string') {
+      downloadLink.value = data.url
+      downloadFilename.value = data.name
+      nextTick(() => {
+        dlink.value!.click()
+      })
+      downloading.value = false
+    }
   }
 }
 
@@ -189,7 +190,5 @@ await updateClub()
     <a
       ref="dlink" :href="downloadLink" :download="downloadFilename" class="hidden"
     >Download</a>
-    <!-- @click="downloadLink = '';
-              downloadFilename = ''" -->
   </Card>
 </template>
diff --git a/app/pages/forms/files.vue b/app/pages/forms/files.vue
@@ -22,7 +22,7 @@ const { toast } = useToast()
 const { data: collectionsData, suspense: _s1 } = useQuery<FileCollection[]>({
   queryKey: ['/api/files/collections'],
 })
-await _s1() // suspense要await
+await _s1()
 
 const collectionLoaded = ref(false)
 if (collectionsData.value) {
@@ -38,7 +38,7 @@ else {
 const { data: clubData, suspense: _s2 } = useQuery<AllClubs>({
   queryKey: ['/api/user/all_clubs'],
 })
-await _s2() // suspense要await
+await _s2()
 
 const clubLoaded = ref(false)
 if (clubData.value) {
@@ -59,16 +59,16 @@ const selectedClub = ref('')
     <SelectTrigger class="mb-4 w-full lg:w-72">
       <SelectValue placeholder="选择一个社团" />
     </SelectTrigger>
-    <SelectContent>
-      <SelectItem v-for="club in clubData.president" :key="club.id" :value="club.id">
+    <SelectContent v-if="clubLoaded && clubData">
+      <SelectItem v-for="club in clubData.president" :key="club.id" :value="String(club.id)">
         {{ club.name.zh }}
       </SelectItem>
+      <SelectItem value="21">
+        测试组
+      </SelectItem>
     </SelectContent>
   </Select>
-  <div v-if="!collectionLoaded">
-    loading
-  </div>
-  <div v-if="collectionLoaded" class="grid grid-cols-1 gap-4 lg:grid-cols-3">
+  <div v-if="clubLoaded && collectionLoaded" class="grid grid-cols-1 gap-4 lg:grid-cols-3">
     <ClubFileUpload
       v-for="collection in collectionsData"
       :key="collection.id"
@@ -78,5 +78,8 @@ const selectedClub = ref('')
       :title="collection.name"
     />
   </div>
+  <div v-else>
+    loading
+  </div>
   <Toaster />
 </template>
diff --git a/server/api/files/club-records.post.ts b/server/api/files/club-records.post.ts
@@ -1,5 +1,10 @@
 import { PrismaClient } from '@prisma/client'
 
+interface Body {
+  clubId: number
+  collection: string
+}
+
 const prisma = new PrismaClient()
 
 export default eventHandler(async (event) => {
@@ -10,12 +15,16 @@ export default eventHandler(async (event) => {
   }
 
   return readBody(event)
-    .then(async (body) => {
+    .then(async (body: Body) => {
       const { clubId, collection } = body
       const records = await prisma.fileUploadRecord.findMany({
         where: {
-          clubId,
-          fileUploadId: collection,
+          clubId: {
+            equals: clubId,
+          },
+          fileUploadId: {
+            equals: collection,
+          },
         },
         include: {
           file: true,
diff --git a/server/api/files/new-record.post.ts b/server/api/files/new-record.post.ts
@@ -0,0 +1,124 @@
+import { PrismaClient } from '@prisma/client'
+import { randomUUID } from 'uncrypto'
+
+interface Body {
+  clubId: number
+  collectionId: string
+  fileContent: string
+  rawName: string
+}
+
+const prisma = new PrismaClient()
+
+export default eventHandler(async (event) => {
+  const { auth } = event.context
+
+  if ((auth?.userId) == null) {
+    setResponseStatus(event, 403)
+  }
+
+  return readBody(event)
+    .then(async (body: Body) => {
+      const { clubId, collectionId, fileContent, rawName } = body
+      // TODO: this should be enabled after the ID mismatch is fixed
+      // const collectionInfo = await prisma.fileCollection.findFirst({
+      //   where: {
+      //     id: collectionId,
+      //   },
+      // })
+      // const clubInfo = await prisma.club.findFirst({
+      //   where: {
+      //     id: clubId,
+      //   },
+      // })
+      // const naming = collectionInfo?.fileNaming
+      // const fileName = naming
+      //   .replaceAll('$id$', clubId)
+      //   .replaceAll('$club$', clubInfo.name.zh)
+      //   .replaceAll('$ext$', rawName.split('.').pop())
+      // TODO: (cont.) and this should be removed
+      const fileName = rawName
+      try {
+        // An error will be thrown if the club's record does not exist
+        const existingRecord = await prisma.fileUploadRecord.findFirstOrThrow({
+          where: {
+            clubId,
+            fileUploadId: collectionId,
+          },
+          select: {
+            id: true,
+            file: true,
+          },
+        })
+        try {
+          await prisma.fileUploadRecord.update({
+            where: {
+              id: existingRecord.id,
+            },
+            data: {
+              createdAt: new Date(),
+              file: {
+                update: {
+                  where: {
+                    id: existingRecord.file.id,
+                  },
+                  data: {
+                    name: fileName,
+                    createdAt: new Date(),
+                  },
+                },
+              },
+            },
+          })
+          await useStorage('s3').setItemRaw(existingRecord.file.fileId, fileContent)
+        }
+        catch (error: any) {
+          return {
+            success: false,
+            error: String(error),
+          }
+        }
+        return {
+          success: true,
+        }
+      }
+      catch (__error) {
+        if (__error instanceof Error) {
+          // Create a new record (the record is not found)
+          const fileUUID = randomUUID()
+          try {
+            await prisma.fileUploadRecord.create({
+              data: {
+                club: {
+                  connect: {
+                    id: clubId,
+                  },
+                },
+                fileUpload: {
+                  connect: {
+                    id: collectionId,
+                  },
+                },
+                file: {
+                  create: {
+                    fileId: fileUUID,
+                    name: fileName,
+                  },
+                },
+              },
+            })
+            await useStorage('s3').setItemRaw(fileUUID, fileContent)
+            return {
+              success: true,
+            }
+          }
+          catch (error) {
+            return {
+              success: false,
+              error: String(error),
+            }
+          }
+        }
+      }
+    })
+})
diff --git a/server/api/files/newRecord.post.ts b/server/api/files/newRecord.post.ts
