chore(storage): test-blob

Author: smarroufin

pages/test-blob.vue

@@ -0,0 +1,20 @@
+<script setup>
+const form = ref(null)
+
+async function upload() {
+  await $fetch('/api/storage/upload', {
+    method: 'POST',
+    body: new FormData(form.value)
+  })
+  // form.value.reset()
+}
+</script>
+
+<template>
+  <form ref="form" @submit.prevent="upload">
+    <input type="file" name="file" class="inline-block text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-sm file:border-0 file:text-sm file:font-semibold file:bg-gray-200 file:text-gray-700 dark:file:bg-gray-700 dark:file:text-gray-200 hover:file:bg-gray-300 dark:hover:file:bg-gray-600">
+    <UButton type="submit">
+      Upload
+    </UButton>
+  </form>
+</template>

server/api/storage/upload.post.ts

@@ -0,0 +1,14 @@
+export default eventHandler(async (event) => {
+  const form = await readFormData(event)
+  const file = form.get('file') as Blob
+
+  if (!file || !file.size) {
+    throw createError({ status: 400, message: 'No file provided' })
+  }
+
+  if (file.type !== 'image/png' && file.type !== 'image/jpeg') {
+    throw createError({ status: 400, message: 'File must be an image' })
+  }
+
+  return useBlob().put(`images/${file.name}`, file)
+})