chore(storage): improve file customMetadata

Author: smarroufin

_nuxthub/server/utils/bucket.ts

@@ -84,13 +84,15 @@ export function useBlob (name: string = '') {
         const bucket = useBucket(name)
 
         const type = file.type || getContentType(file.filename)
-        const extension = getExtension(type)
-        // TODO: ensure filename unicity
-        const filename = [randomUUID(), extension].filter(Boolean).join('.')
+        // TODO: ensure key unicity
+        const key = randomUUID()
         const httpMetadata = { contentType: type }
-        const customMetadata = getMetadata(type, file.data)
+        const customMetadata: Record<string, any> = {
+          ...getMetadata(type, file.data),
+          filename: file.filename
+        }
 
-        return await bucket.put(filename, toArrayBuffer(file.data), { httpMetadata, customMetadata })
+        return await bucket.put(key, toArrayBuffer(file.data), { httpMetadata, customMetadata })
       }
     },
     async delete (key: string) {
@@ -109,10 +111,6 @@ function getContentType (pathOrExtension?: string) {
   return (pathOrExtension && mime.getType(pathOrExtension)) || 'application/octet-stream'
 }
 
-function getExtension (type?: string) {
-  return (type && mime.getExtension(type)) || ''
-}
-
 function getMetadata (type: string, buffer: Buffer) {
   if (type.startsWith('image/')) {
     return imageMeta(buffer) as Record<string, any>

pages/storage.vue

@@ -122,10 +122,11 @@ const items = [[{
       >
         <!-- <img v-if="file.httpMetadata?.contentType?.startsWith('image/')" :src="`/api/storage/${file.key}`" class="h-36 w-full object-cover"> -->
         <div class="h-36 w-full flex items-center justify-center p-2 text-center">
-          {{ file.key }}
+          {{ file.customMetadata?.filename }}
         </div>
         <div class="flex flex-col gap-1 p-2 border-t border-gray-200 dark:border-gray-800">
-          <span class="text-sm font-medium">{{ file.key }}</span>
+          <span class="text-sm font-medium">{{ file.customMetadata?.filename }}</span>
+          <span class="text-sm line-clamp-2">{{ file.key }}</span>
           <div class="flex items-center justify-between gap-1">
             <span class="text-xs truncate">{{ file.httpMetadata?.contentType || '-' }}</span>
             <span class="text-xs">{{ file.size ? `${Math.round(file.size / Math.pow(1024, 2) * 100) / 100}MB` : '-' }}</span>