chore(storage): add delete action & files preview

Author: smarroufin

pages/storage.vue

@@ -57,15 +57,37 @@ function onFileSelect (e) {
   const files = [...(target.files || [])]
   if (files.length) {
     newFileValue.value = files[0]
-    if (!newFileKey.value.trim()) {
-      newFileKey.value = files[0].name
-    }
+    newFileKey.value = files[0].name
   }
 
   // Clear the input value so that the same file can be uploaded again
-  // target.value = ''
+  target.value = ''
 }
 
+async function deleteFile (key) {
+  try {
+    await useFetch(`/api/storage/${key}`, { method: 'DELETE' })
+    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' })
+    }
+  }
+}
+
+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',
@@ -102,28 +124,58 @@ const items = [[{
         autofocus
         :ui="{ wrapper: 'flex-1' }"
       />
+      <UInput
+        :model-value="newFileValue?.name"
+        name="fileValue"
+        disabled
+        class="flex-1"
+        autocomplete="off"
+        :ui="{ wrapper: 'flex-1' }"
+      />
       <input
         ref="uploadRef"
         tabindex="-1"
         accept="jpeg, png"
         type="file"
         name="file"
-        class="flex-1"
+        class="hidden"
         @change="onFileSelect"
       >
 
+      <UButton
+        label="Select file"
+        @click="uploadRef.click()"
+      />
+
       <UButton type="submit" icon="i-heroicons-plus-20-solid" :loading="loading" :disabled="false" />
     </div>
 
-    <ul class="divide-y divide-gray-200 dark:divide-gray-800">
-      <li
-        v-for="(file, index) of storage"
-        :key="index"
-        class="flex items-center gap-4 py-2"
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-2">
+      <UCard
+        v-for="file of storage"
+        :key="file.key"
+        :ui="{
+          body: {
+            base: 'space-y-0',
+            padding: ''
+          }
+        }"
+        class="overflow-hidden relative"
       >
-        <span class="flex-1 font-medium">{{ file.key }}</span>
-        <span class="flex-1 font-medium">{{ file.httpMetadata?.contentType || '-' }}</span>
-      </li>
-    </ul>
+        <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">
+          {{ 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>
+            <span class="text-xs">{{ file.size ? `${Math.round(file.size / Math.pow(1024, 2) * 100) / 100}MB` : '-' }}</span>
+          </div>
+        </div>
+
+        <UButton icon="i-heroicons-x-mark" variant="link" color="primary" class="absolute top-0 right-0" @click="deleteFile(file.key)" />
+      </UCard>
+    </div>
   </UCard>
 </template>