chore(storage): allow multiple files upload

Author: smarroufin

_nuxthub/server/utils/bucket.ts

@@ -1,4 +1,4 @@
-import type { R2Bucket, R2ListOptions, ReadableStreamDefaultReader } from '@cloudflare/workers-types/experimental'
+import type { R2Bucket, R2ListOptions } from '@cloudflare/workers-types/experimental'
 import mime from 'mime'
 import { imageMeta } from 'image-meta'
 import { defu } from 'defu'
@@ -49,8 +49,12 @@ export async function serveFiles (bucket: R2Bucket, options: R2ListOptions = {})
   return listed.objects
 }
 
-export function getContentType (key: string) {
-  return mime.getType(key) || 'application/octet-stream'
+export function getContentType (pathOrExtension?: string) {
+  return (pathOrExtension && mime.getType(pathOrExtension)) || 'application/octet-stream'
+}
+
+export function getExtension (type?: string) {
+  return (type && mime.getExtension(type)) || ''
 }
 
 export function getMetadata (type: string, buffer: Buffer) {
@@ -61,33 +65,11 @@ export function getMetadata (type: string, buffer: Buffer) {
   }
 }
 
-export async function processStream(
-  reader: ReadableStreamDefaultReader<Uint8Array>
-): Promise<Uint8Array> {
-  let { value, done } = await reader.read()
-
-  const results: Array<Uint8Array> = []
-
-  while (!done && value) {
-    const newRead = await reader.read()
-
-    results.push(value)
-
-    value = newRead.value
-    done = newRead.done
+export function toArrayBuffer (buffer: Buffer) {
+  const arrayBuffer = new ArrayBuffer(buffer.length)
+  const view = new Uint8Array(arrayBuffer)
+  for (let i = 0; i < buffer.length; ++i) {
+    view[i] = buffer[i]
   }
-
-  const result = new Uint8Array(
-    // total size
-    results.reduce((acc, value) => acc + value.length, 0)
-  )
-
-  // Create a new array with total length and merge all source arrays.
-  let offset = 0
-  results.forEach((item) => {
-    result.set(item, offset)
-    offset += item.length
-  })
-
-  return result
+  return arrayBuffer
 }

pages/storage.vue

@@ -1,93 +1,61 @@
-<script setup>
+<script setup lang="ts">
 definePageMeta({
   middleware: 'auth'
 })
 const loading = ref(false)
-const newFileKey = ref('')
-const newFileValue = ref()
-const newFileKeyInput = ref()
+const newFilesValue = ref<File[]>([])
 const uploadRef = ref()
 
 const toast = useToast()
 const { user, clear } = useUserSession()
 const { data: storage } = await useFetch('/api/storage')
 
 async function addFile () {
-  const key = newFileKey.value.trim().replace(/\s/g, '-')
-  if (!key || !newFileValue.value) {
-    toast.add({ title: `Missing ${!key ? 'key' : 'file'}.`, color: 'red' })
+  if (!newFilesValue.value.length) {
+    toast.add({ title: 'Missing files.', color: 'red' })
     return
   }
 
   loading.value = true
 
   try {
     const formData = new FormData()
-    formData.append('data', new Blob([JSON.stringify({ key })], { type: 'application/json' }))
-    formData.append('file', newFileValue.value)
-    const file = await $fetch('/api/storage', {
+    newFilesValue.value.forEach((file) => formData.append('files', file))
+    const files = await $fetch('/api/storage', {
       method: 'PUT',
       body: formData
     })
-    const fileIndex = storage.value.findIndex(e => e.key === file.key)
-    if (fileIndex !== -1) {
-      storage.value.splice(fileIndex, 1, file)
-    } else {
-      storage.value.push(file)
-    }
-    toast.add({ title: `File "${key}" created.` })
-    newFileKey.value = ''
-    newFileValue.value = null
-    nextTick(() => {
-      newFileKeyInput.value?.input?.focus()
-    })
-  } catch (err) {
-    if (err.data?.data?.issues) {
-      const title = err.data.data.issues.map(issue => issue.message).join('\n')
-      toast.add({ title, color: 'red' })
-    }
+    storage.value!.push(...files)
+    toast.add({ title: 'Files created.' })
+    newFilesValue.value = []
+  } catch (err: any) {
+    const title = err.data?.data?.issues?.map((issue: any) => issue.message).join('\n') || err.message()
+    toast.add({ title, color: 'red' })
   }
   loading.value = false
 }
 
-function onFileSelect (e) {
+function onFileSelect (e: any) {
   const target = e.target
 
   // clone FileList so the reference does not clear due to following target clear
-  const files = [...(target.files || [])]
-  if (files.length) {
-    newFileValue.value = files[0]
-    newFileKey.value = files[0].name
-  }
+  newFilesValue.value = [...(target.files || [])]
 
   // Clear the input value so that the same file can be uploaded again
   target.value = ''
 }
 
-async function deleteFile (key) {
+async function deleteFile (key: string) {
   try {
     await useFetch(`/api/storage/${key}`, { method: 'DELETE' })
-    storage.value = storage.value.filter(t => t.key !== key)
+    storage.value = storage.value!.filter(t => t.key !== key)
     toast.add({ title: `File "${key}" deleted.` })
-  } catch (err) {
-    if (err.data?.data?.issues) {
-      const title = err.data.data.issues.map(issue => issue.message).join('\n')
-      toast.add({ title, color: 'red' })
-    }
+  } catch (err: any) {
+    const title = err.data?.data?.issues?.map((issue: any) => issue.message).join('\n') || err.message()
+    toast.add({ title, color: 'red' })
   }
 }
 
-onMounted(async () => {
-  // FIXME
-  // storage.value = await Promise.all(storage.value.map(async (file) => {
-  //   const { data: { body } } = await useFetch(`/api/storage/${file.key}`, { params: { populate: true } })
-  //   return {
-  //     ...file,
-  //     body
-  //   }
-  // }))
-})
-
 const items = [[{
   label: 'Logout',
   icon: 'i-heroicons-arrow-left-on-rectangle',
@@ -114,18 +82,7 @@ const items = [[{
 
     <div class="flex items-center gap-2">
       <UInput
-        ref="newFileKeyInput"
-        v-model="newFileKey"
-        name="fileKey"
-        :disabled="loading"
-        class="flex-1"
-        placeholder="key"
-        autocomplete="off"
-        autofocus
-        :ui="{ wrapper: 'flex-1' }"
-      />
-      <UInput
-        :model-value="newFileValue?.name"
+        :model-value="newFilesValue?.map((file) => file.name).join(', ')"
         name="fileValue"
         disabled
         class="flex-1"
@@ -137,7 +94,8 @@ const items = [[{
         tabindex="-1"
         accept="jpeg, png"
         type="file"
-        name="file"
+        name="files"
+        multiple
         class="hidden"
         @change="onFileSelect"
       >
@@ -147,7 +105,7 @@ const items = [[{
         @click="uploadRef.click()"
       />
 
-      <UButton type="submit" icon="i-heroicons-plus-20-solid" :loading="loading" :disabled="false" />
+      <UButton type="submit" icon="i-heroicons-plus-20-solid" :loading="loading" :disabled="!newFilesValue.length" />
     </div>
 
     <div class="grid grid-cols-1 md:grid-cols-3 gap-2">
@@ -163,13 +121,13 @@ const items = [[{
         class="overflow-hidden relative"
       >
         <img v-if="file.httpMetadata?.contentType?.startsWith('image/') && file.body" :src="`data:${file.httpMetadata.contentType};base64,${(file.body)}`" class="h-36 w-full object-cover">
-        <div v-else class="h-36 w-full flex items-center justify-center">
+        <div class="h-36 w-full flex items-center justify-center p-2 text-center">
           {{ file.key }}
         </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>
-          <div class="flex items-center justify-between">
-            <span class="text-xs">{{ file.httpMetadata?.contentType || '-' }}</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>
           </div>
         </div>

server/api/storage/index.put.ts

@@ -1,36 +1,34 @@
-import type { MultiPartData } from 'h3'
+import { randomUUID } from 'uncrypto'
 
 export default eventHandler(async (event) => {
   await requireUserSession(event)
 
-  const form: MultiPartData[] | undefined = await readMultipartFormData(event)
-  if (!form) {
-    throw createError('Request body must be multipart.')
-  }
-  const dataPart = form.find((part) => part.name === 'data')
-  const filePart = form.find((part) => part.name === 'file')
-  if (!dataPart || !filePart) {
-    throw createError(`Missing ${!dataPart ? 'data' : 'file'} body param.`)
+  let files = (await readMultipartFormData(event) || [])
+
+  // Filter only files
+  files = files.filter((file) => Boolean(file.filename))
+  if (!files) {
+    throw createError({ statusCode: 400, message: 'Missing files' })
   }
+  const objects = []
 
   try {
-    const data = JSON.parse(dataPart.data.toString())
-    const file = filePart.data
-    const type = filePart.type || getContentType(data.key)
-    const httpMetadata = { contentType: type }
-    const customMetadata = getMetadata(type, filePart.data)
-
-    // Set entry for the current user
-
-    const object = await useBucket().put(data.key, file.toString(), { httpMetadata, customMetadata })
-    return {
-      ...object,
-      body: file.toString('base64')
+    for (const file of files) {
+      const type = file.type || getContentType(file.filename)
+      const extension = getExtension(type)
+      // TODO: ensure filename unicity
+      const filename = [randomUUID(), extension].filter(Boolean).join('.')
+      const httpMetadata = { contentType: type }
+      const customMetadata = getMetadata(type, file.data)
+      const object = await useBucket().put(filename, toArrayBuffer(file.data), { httpMetadata, customMetadata })
+      objects.push(object)
     }
   } catch (e: any) {
     throw createError({
       statusCode: 500,
       message: `Storage error: ${e.message}`
     })
   }
+
+  return objects
 })