fix: add missing dep and improve demo

Author: atinux

_demo/server/api/storage/[...pathname].delete.ts

@@ -0,0 +1,8 @@
+export default eventHandler(async (event) => {
+  await requireUserSession(event)
+  const { pathname } = await getValidatedRouterParams(event, z.object({
+    pathname: z.string().min(1)
+  }).parse)
+
+  return useBlob().delete(pathname)
+})

_demo/server/api/storage/[...pathname].get.ts

@@ -0,0 +1,8 @@
+export default eventHandler(async (event) => {
+  await requireUserSession(event)
+  const { pathname } = await getValidatedRouterParams(event, z.object({
+    pathname: z.string().min(1)
+  }).parse)
+
+  return useBlob().serve(event, pathname)
+})

_demo/server/api/storage/[key].delete.ts

@@ -6,9 +6,7 @@ export default eventHandler(async (event) => {
     throw createError({ statusCode: 400, message: 'No file provided' })
   }
 
-  if (!file.type.startsWith('image/')) {
-    throw createError({ statusCode: 400, message: 'File must be an image' })
-  }
+  ensureBlob(file, { maxSize: '1MB', types: ['image' ]})
 
-  return useBlob().put(`images/${file.name}`, file)
+  return useBlob().put(`images/${file.name}`, file, { addRandomSuffix: false })
 })

_demo/server/api/storage/[key].get.ts

@@ -26,6 +26,8 @@
   },
   "dependencies": {
     "@cloudflare/workers-types": "^4.20240208.0",
+    "@sindresorhus/slugify": "^2.2.1",
+    "@uploadthing/mime-types": "^0.2.2",
     "mime": "^4.0.1",
     "nuxt-auth-utils": "^0.0.16",
     "pkg-types": "^1.0.3",

_demo/server/api/storage/upload.post.ts

@@ -1,4 +1,5 @@
 import type { extensions } from '@uploadthing/mime-types'
+import slugify from '@sindresorhus/slugify'
 import type { R2Bucket } from '@cloudflare/workers-types/experimental'
 import { ofetch } from 'ofetch'
 import mime from 'mime'
@@ -75,7 +76,9 @@ export function useBlob() {
 
       const { dir, ext, name: filename } = parse(pathname)
       if (addRandomSuffix) {
-        pathname = joinURL(dir === '.' ? '' : dir, `${filename}-${randomUUID().split('-')[0]}${ext}`)
+        pathname = joinURL(dir === '.' ? '' : dir, `${slugify(filename)}-${randomUUID().split('-')[0]}${ext}`)
+      } else {
+        pathname = joinURL(dir === '.' ? '' : dir, `${slugify(filename)}${ext}`)
       }
 
       const httpMetadata: Record<string, string> = { contentType }