From 87af2e3b7f76defba24c49ecb3bf6d430bbb4f76 Mon Sep 17 00:00:00 2001
From: Teages <Teages@teages.xyz>
Date: Fri, 12 Apr 2024 21:03:58 +0800
Subject: [PATCH 01/15] fix: wrong type for head of proxyHubBlob

---
 src/runtime/server/utils/blob.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/runtime/server/utils/blob.ts b/src/runtime/server/utils/blob.ts
index 46f0e3d4..b01f8112 100644
--- a/src/runtime/server/utils/blob.ts
+++ b/src/runtime/server/utils/blob.ts
@@ -274,7 +274,7 @@ export function proxyHubBlob(projectUrl: string, secretKey?: string) {
       })
     },
     async head(pathname: string) {
-      return await blobAPI<void>(`/head/${decodeURI(pathname)}`, {
+      return await blobAPI<BlobObject>(`/head/${decodeURI(pathname)}`, {
         method: 'GET'
       })
     },

From 0bf82145a3b26f2047d70cf3b382e923fa84f168 Mon Sep 17 00:00:00 2001
From: Teages <Teages@teages.xyz>
Date: Fri, 12 Apr 2024 21:07:23 +0800
Subject: [PATCH 02/15] feat: multipart upload

---
 playground/pages/blob.vue                     |  77 ++++++++-
 .../api/blob/mpu/[...pathname].delete.ts      |  22 +++
 .../server/api/blob/mpu/[...pathname].put.ts  |  43 +++++
 playground/server/api/blob/mpu/index.post.ts  |  55 +++++++
 .../api/_hub/blob/mpu/[...pathname].delete.ts |  31 ++++
 .../api/_hub/blob/mpu/[...pathname].put.ts    |  52 ++++++
 .../server/api/_hub/blob/mpu/index.post.ts    |  59 +++++++
 src/runtime/server/utils/blob.ts              | 148 +++++++++++++++++-
 8 files changed, 480 insertions(+), 7 deletions(-)
 create mode 100644 playground/server/api/blob/mpu/[...pathname].delete.ts
 create mode 100644 playground/server/api/blob/mpu/[...pathname].put.ts
 create mode 100644 playground/server/api/blob/mpu/index.post.ts
 create mode 100644 src/runtime/server/api/_hub/blob/mpu/[...pathname].delete.ts
 create mode 100644 src/runtime/server/api/_hub/blob/mpu/[...pathname].put.ts
 create mode 100644 src/runtime/server/api/_hub/blob/mpu/index.post.ts

diff --git a/playground/pages/blob.vue b/playground/pages/blob.vue
index 27038277..f082113e 100644
--- a/playground/pages/blob.vue
+++ b/playground/pages/blob.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { SerializeObject } from 'nitropack'
+
 const loading = ref(false)
 const newFilesValue = ref<File[]>([])
 const uploadRef = ref()
@@ -15,12 +17,7 @@ async function addFile () {
   loading.value = true
 
   try {
-    const formData = new FormData()
-    newFilesValue.value.forEach((file) => formData.append('files', file))
-    const uploadedFiles = await $fetch('/api/blob', {
-      method: 'PUT',
-      body: formData
-    })
+    const uploadedFiles = await uploadFiles(newFilesValue.value)
     files.value!.push(...uploadedFiles)
     toast.add({ title: `File${uploadedFiles.length > 1 ? 's' : ''} uploaded.` })
     newFilesValue.value = []
@@ -31,6 +28,74 @@ async function addFile () {
   loading.value = false
 }
 
+async function uploadFiles(files: File[]) {
+  const bigFileLimit = 10 * 1024 * 1024 // 10MB
+  const chunkSize = 10 * 1024 * 1024 // 10MB
+
+  const bigFiles = files.filter((file) => file.size > bigFileLimit)
+  const smallFiles = files.filter((file) => file.size <= bigFileLimit)
+
+  // upload small files
+  const formData = new FormData()
+  smallFiles.forEach((file) => formData.append('files', file))
+
+  const uploadedFiles = await $fetch('/api/blob', {
+    method: 'PUT',
+    body: formData
+  })
+
+  // upload big files
+  for (const file of bigFiles) {
+    const chunks = Math.ceil(file.size / chunkSize)
+    const uploaded: BlobUploadedPart[] = []
+
+    const { pathname, uploadId } = await $fetch<{pathname: string, uploadId: string}>('/api/blob/mpu', {
+      method: 'POST',
+      query: {
+        action: 'create',
+        pathname: file.name,
+      }
+    })
+
+    for (let i = 0; i < chunks; i += 1) {
+      const start = i * chunkSize
+      const end = Math.min(start + chunkSize, file.size)
+      const partNumber = i + 1
+      const chunk = file.slice(start, end)
+
+      const part = await $fetch<BlobUploadedPart>(`/api/blob/mpu/${pathname}`, {
+        params: {},
+        method: 'PUT',
+        body: await chunk.arrayBuffer(),
+        query: {
+          partNumber,
+          uploadId,
+        }
+      })
+
+      // optional: verify the etag and reupload if not match
+
+      uploaded.push(part)
+    }
+
+    const complete = await $fetch<SerializeObject<BlobObject>>(`/api/blob/mpu`, {
+      method: 'POST',
+      query: {
+        action: 'complete',
+        pathname,
+        uploadId,
+      },
+      body: {
+        parts: uploaded,
+      },
+    })
+
+    uploadedFiles.push(complete)
+  }
+
+  return uploadedFiles
+}
+
 function onFileSelect (e: any) {
   const target = e.target
 
diff --git a/playground/server/api/blob/mpu/[...pathname].delete.ts b/playground/server/api/blob/mpu/[...pathname].delete.ts
new file mode 100644
index 00000000..be6ecb9f
--- /dev/null
+++ b/playground/server/api/blob/mpu/[...pathname].delete.ts
@@ -0,0 +1,22 @@
+import { z } from 'zod'
+
+export default eventHandler(async (event) => {
+  const hub = hubBlob()
+
+  const { pathname } = await getValidatedRouterParams(event, z.object({
+    pathname: z.string().min(1)
+  }).parse)
+
+  const { uploadId } = await getValidatedQuery(event, z.object({
+    uploadId: z.string(),
+  }).parse)
+
+  const mpu = hub.resumeMultipartUpload(pathname, uploadId)
+
+  try {
+    return await mpu.abort()
+  }
+  catch (e: any) {
+    throw createError({ status: 400, message: e.message })
+  }
+})
diff --git a/playground/server/api/blob/mpu/[...pathname].put.ts b/playground/server/api/blob/mpu/[...pathname].put.ts
new file mode 100644
index 00000000..2dc91ffc
--- /dev/null
+++ b/playground/server/api/blob/mpu/[...pathname].put.ts
@@ -0,0 +1,43 @@
+import { z } from 'zod'
+
+async function streamToArrayBuffer(stream: ReadableStream, streamSize: number) {
+  const result = new Uint8Array(streamSize)
+  let bytesRead = 0
+  const reader = stream.getReader()
+  // eslint-disable-next-line no-constant-condition
+  while (true) {
+    const { done, value } = await reader.read()
+    if (done) {
+      break
+    }
+    result.set(value, bytesRead)
+    bytesRead += value.length
+  }
+  return result
+}
+
+export default eventHandler(async (event) => {
+  const { pathname } = await getValidatedRouterParams(event, z.object({
+    pathname: z.string().min(1)
+  }).parse)
+
+  const { uploadId, partNumber } = await getValidatedQuery(event, z.object({
+    uploadId: z.string(),
+    partNumber: z.coerce.number(),
+  }).parse)
+
+  const contentLength = Number(getHeader(event, 'content-length') || '0')
+
+  const stream = getRequestWebStream(event)!
+  const body = await streamToArrayBuffer(stream, contentLength)
+
+
+  const hub = hubBlob()
+  const mpu = hub.resumeMultipartUpload(pathname, uploadId)
+
+  try {
+    return await mpu.uploadPart(partNumber, body)
+  } catch (e: any) {
+    throw createError({ status: 400, message: e.message })
+  }
+})
diff --git a/playground/server/api/blob/mpu/index.post.ts b/playground/server/api/blob/mpu/index.post.ts
new file mode 100644
index 00000000..e5838ab6
--- /dev/null
+++ b/playground/server/api/blob/mpu/index.post.ts
@@ -0,0 +1,55 @@
+import { z } from 'zod'
+
+export default eventHandler(async (event) => {
+  const query = await getValidatedQuery(event, z.discriminatedUnion('action', [
+    z.object({
+      action: z.literal('create'),
+      pathname: z.string(),
+    }),
+    z.object({
+      action: z.literal('complete'),
+      pathname: z.string(),
+      uploadId: z.string(),
+    }),
+  ]).parse)
+
+  if (query.action === 'create') {
+    const options = await readValidatedBody(event, z.record(z.string(), z.any()).optional().parse)
+
+    const blob = hubBlob()
+
+    try {
+      const object = await blob.createMultipartUpload(query.pathname, options)
+      return {
+        uploadId: object.uploadId,
+        pathname: object.pathname,
+      }
+    } catch (e: any) {
+      throw createError({
+        statusCode: 400,
+        message: e.message
+      })
+    }
+  } else {
+    const { uploadId, pathname } = query
+    const { parts } = await readValidatedBody(event,z.object({
+      parts: z.array(z.object({
+        partNumber: z.number(),
+        etag: z.string(),
+      }))
+    }).parse)
+
+    const blob = hubBlob()
+
+    const mpu = blob.resumeMultipartUpload(pathname, uploadId)
+    try {
+      const object = await mpu.complete(parts)
+      return object
+    } catch (e: any) {
+      throw createError({
+        statusCode: 400,
+        message: e.message
+      })
+    }
+  }
+})
diff --git a/src/runtime/server/api/_hub/blob/mpu/[...pathname].delete.ts b/src/runtime/server/api/_hub/blob/mpu/[...pathname].delete.ts
new file mode 100644
index 00000000..ce694f2c
--- /dev/null
+++ b/src/runtime/server/api/_hub/blob/mpu/[...pathname].delete.ts
@@ -0,0 +1,31 @@
+import { createError, eventHandler } from 'h3'
+import { z } from 'zod'
+import { hubBlob } from '../../../../utils/blob'
+import { requireNuxtHubAuthorization } from '../../../../utils/auth'
+import { requireNuxtHubFeature } from '../../../../utils/features'
+
+export default eventHandler(async (event) => {
+  await requireNuxtHubAuthorization(event)
+  requireNuxtHubFeature('blob')
+
+  const { pathname } = await getValidatedRouterParams(event, z.object({
+    pathname: z.string().min(1)
+  }).parse)
+
+  const { uploadId } = await getValidatedQuery(event, z.object({
+    uploadId: z.string(),
+  }).parse)
+
+
+  const blob = hubBlob()
+  const mpu = blob.resumeMultipartUpload(pathname, uploadId)
+
+  try {
+    await mpu.abort()
+  } catch (e: any) {
+    throw createError({
+      statusCode: 500,
+      message: `Storage error: ${e.message}`
+    })
+  }
+})
diff --git a/src/runtime/server/api/_hub/blob/mpu/[...pathname].put.ts b/src/runtime/server/api/_hub/blob/mpu/[...pathname].put.ts
new file mode 100644
index 00000000..fb0a45de
--- /dev/null
+++ b/src/runtime/server/api/_hub/blob/mpu/[...pathname].put.ts
@@ -0,0 +1,52 @@
+import { createError, eventHandler } from 'h3'
+import { z } from 'zod'
+import { hubBlob } from '../../../../utils/blob'
+import { requireNuxtHubAuthorization } from '../../../../utils/auth'
+import { requireNuxtHubFeature } from '../../../../utils/features'
+
+async function streamToArrayBuffer(stream: ReadableStream, streamSize: number) {
+  const result = new Uint8Array(streamSize)
+  let bytesRead = 0
+  const reader = stream.getReader()
+  // eslint-disable-next-line no-constant-condition
+  while (true) {
+    const { done, value } = await reader.read()
+    if (done) {
+      break
+    }
+    result.set(value, bytesRead)
+    bytesRead += value.length
+  }
+  return result
+}
+
+export default eventHandler(async (event) => {
+  await requireNuxtHubAuthorization(event)
+  requireNuxtHubFeature('blob')
+
+  const { pathname } = await getValidatedRouterParams(event, z.object({
+    pathname: z.string().min(1)
+  }).parse)
+
+  const { uploadId, partNumber } = await getValidatedQuery(event, z.object({
+    uploadId: z.string(),
+    partNumber: z.number()
+  }).parse)
+
+  const contentLength = Number(getHeader(event, 'content-length') || '0')
+
+  const stream = getRequestWebStream(event)!
+  const body = await streamToArrayBuffer(stream, contentLength)
+
+  const hub = hubBlob()
+  const mpu = hub.resumeMultipartUpload(pathname, uploadId)
+
+  try {
+    return await mpu.uploadPart(partNumber, body)
+  } catch (e: any) {
+    throw createError({
+      statusCode: 500,
+      message: `Storage error: ${e.message}`
+    })
+  }
+})
diff --git a/src/runtime/server/api/_hub/blob/mpu/index.post.ts b/src/runtime/server/api/_hub/blob/mpu/index.post.ts
new file mode 100644
index 00000000..5674b8d7
--- /dev/null
+++ b/src/runtime/server/api/_hub/blob/mpu/index.post.ts
@@ -0,0 +1,59 @@
+import { createError, eventHandler } from 'h3'
+import { z } from 'zod'
+import { hubBlob } from '../../../../utils/blob'
+import { requireNuxtHubAuthorization } from '../../../../utils/auth'
+import { requireNuxtHubFeature } from '../../../../utils/features'
+
+export default eventHandler(async (event) => {
+  await requireNuxtHubAuthorization(event)
+  requireNuxtHubFeature('blob')
+
+  const query = await getValidatedQuery(event, z.discriminatedUnion('action', [
+    z.object({
+      action: z.literal('create'),
+      pathname: z.string(),
+    }),
+    z.object({
+      action: z.literal('complete'),
+      pathname: z.string(),
+      uploadId: z.string(),
+    }),
+  ]).parse)
+
+  if (query.action === 'create') {
+    const options = await readValidatedBody(event, z.record(z.string(), z.any()).optional().parse)
+
+    const blob = hubBlob()
+
+    try {
+      const object = await blob.createMultipartUpload(query.pathname, options)
+      return object
+    } catch (e: any) {
+      throw createError({
+        statusCode: 500,
+        message: `Storage error: ${e.message}`
+      })
+    }
+  } else {
+    const { uploadId, pathname } = query
+    const { parts } = await readValidatedBody(event,z.object({
+      parts: z.array(z.object({
+        partNumber: z.number(),
+        etag: z.string(),
+      }))
+    }).parse)
+
+    const blob = hubBlob()
+
+    const mpu = blob.resumeMultipartUpload(pathname, uploadId)
+    try {
+      const object = await mpu.complete(parts)
+      return object
+    } catch (e: any) {
+      throw createError({
+        statusCode: 500,
+        message: `Storage error: ${e.message}`
+      })
+    }
+  }
+})
diff --git a/src/runtime/server/utils/blob.ts b/src/runtime/server/utils/blob.ts
index b01f8112..0434a709 100644
--- a/src/runtime/server/utils/blob.ts
+++ b/src/runtime/server/utils/blob.ts
@@ -1,6 +1,6 @@
 import type { extensions } from '@uploadthing/mime-types'
 import slugify from '@sindresorhus/slugify'
-import type { R2Bucket, ReadableStream } from '@cloudflare/workers-types/experimental'
+import type { R2Bucket, ReadableStream, R2MultipartUpload } from '@cloudflare/workers-types/experimental'
 import { ofetch } from 'ofetch'
 import mime from 'mime'
 import type { H3Event } from 'h3'
@@ -31,6 +31,40 @@ export interface BlobObject {
   uploadedAt: Date
 }
 
+export interface BlobUploadedPart {
+  /**
+   * The number of the part.
+   */
+  partNumber: number;
+  /**
+   * The etag of the part.
+   */
+  etag: string;
+}
+
+export interface BlobMultipartUpload {
+  /**
+   * The pathname of the multipart upload.
+   */
+  readonly pathname: string
+  /**
+   * The upload id of the multipart upload.
+   */
+  readonly uploadId: string
+  /**
+   * Upload a single part to this multipart upload.
+   */
+  uploadPart(partNumber: number, value: string | ReadableStream<any> | ArrayBuffer | ArrayBufferView | Blob): Promise<BlobUploadedPart>
+  /**
+   * Abort the multipart upload.
+   */
+  abort(): Promise<void>
+  /**
+   * Completes the multipart upload.
+   */
+  complete(uploadedParts: BlobUploadedPart[]): Promise<BlobObject>
+}
+
 export interface BlobListOptions {
   /**
    * The maximum number of blobs to return per request.
@@ -63,6 +97,22 @@ export interface BlobPutOptions {
   [key: string]: any
 }
 
+export interface BlobMultipartOptions {
+  /**
+   * The content type of the blob.
+   */
+  contentType?: string,
+  /**
+   * The content length of the blob.
+   */
+  contentLength?: string,
+  /**
+   * If a random suffix is added to the blob pathname.
+   */
+  addRandomSuffix?: boolean,
+  [key: string]: any
+}
+
 const _r2_buckets: Record<string, R2Bucket> = {}
 
 
@@ -123,6 +173,14 @@ interface HubBlob {
    * @param pathnames The pathname of the blob
    */
   delete(pathnames: string | string[]): Promise<void>
+  /**
+   * Create a multipart upload.
+   */
+  createMultipartUpload(pathname: string, options?: BlobMultipartOptions): Promise<BlobMultipartUpload>
+  /**
+   * Get the specified multipart upload.
+   */
+  resumeMultipartUpload(pathname: string, uploadId: string): BlobMultipartUpload
 }
 
 /**
@@ -218,6 +276,32 @@ export function hubBlob(): HubBlob {
       } else {
         return await bucket.delete(decodeURI(pathnames))
       }
+    },
+    async createMultipartUpload(pathname: string, options: BlobMultipartOptions = { addRandomSuffix: true }): Promise<BlobMultipartUpload> {
+      pathname = decodeURI(pathname)
+      const { contentType: optionsContentType, contentLength, addRandomSuffix, ...customMetadata } = options
+      const contentType = optionsContentType || getContentType(pathname)
+
+      const { dir, ext, name: filename } = parse(pathname)
+      if (addRandomSuffix) {
+        pathname = joinURL(dir === '.' ? '' : dir, `${slugify(filename)}-${randomUUID().split('-')[0]}${ext}`)
+      } else {
+        pathname = joinURL(dir === '.' ? '' : dir, `${slugify(filename)}${ext}`)
+      }
+
+      const httpMetadata: Record<string, string> = { contentType }
+      if (contentLength) {
+        httpMetadata.contentLength = contentLength
+      }
+
+      const mpu = await bucket.createMultipartUpload(pathname, { httpMetadata, customMetadata })
+
+      return mapR2MpuToBlobMpu(mpu)
+    },
+    resumeMultipartUpload(pathname: string, uploadId: string) {
+      const mpu = bucket.resumeMultipartUpload(pathname, uploadId)
+
+      return mapR2MpuToBlobMpu(mpu)
     }
   }
   return {
@@ -292,6 +376,53 @@ export function proxyHubBlob(projectUrl: string, secretKey?: string) {
         })
       }
       return
+    },
+    async createMultipartUpload(pathname: string, options: BlobMultipartOptions = { addRandomSuffix: true }) {
+      return await blobAPI<BlobMultipartUpload>(`/mpu`, {
+        method: 'POST',
+        query: {
+          action: 'create',
+          pathname: decodeURI(pathname),
+        },
+        body: options,
+      })
+    },
+    resumeMultipartUpload(pathname: string, uploadId: string): BlobMultipartUpload {
+      return {
+        pathname,
+        uploadId,
+        async uploadPart(partNumber: number, body: string | ReadableStream<any> | ArrayBuffer | ArrayBufferView | Blob): Promise<BlobUploadedPart> {
+          return await blobAPI<BlobUploadedPart>(`/mpu/${decodeURI(pathname)}`, {
+            method: 'PUT',
+            query: {
+              uploadId,
+              partNumber,
+            },
+            body,
+          })
+        },
+        async abort(): Promise<void> {
+          return await blobAPI<void>(`/mpu/${decodeURI(pathname)}`, {
+            method: 'DELETE',
+            query: {
+              uploadId,
+            },
+          })
+        },
+        async complete(uploadedParts: BlobUploadedPart[]): Promise<BlobObject> {
+          return await blobAPI<BlobObject>(`/mpu`, {
+            method: 'POST',
+            query: {
+              action: 'complete',
+              pathname,
+              uploadId,
+            },
+            body: {
+              parts: uploadedParts,
+            },
+          })
+        },
+      }
     }
   }
 
@@ -314,6 +445,21 @@ function mapR2ObjectToBlob(object: R2Object): BlobObject {
   }
 }
 
+function mapR2MpuToBlobMpu(mpu: R2MultipartUpload): BlobMultipartUpload {
+  return {
+    pathname: mpu.key,
+    uploadId: mpu.uploadId,
+    async uploadPart(partNumber: number, value: string | ReadableStream<any> | ArrayBuffer | ArrayBufferView | Blob) {
+      return await mpu.uploadPart(partNumber, value as any)
+    },
+    abort: mpu.abort,
+    async complete(uploadedParts: BlobUploadedPart[]) {
+      const object = await mpu.complete(uploadedParts)
+      return mapR2ObjectToBlob(object)
+    }
+  }
+}
+
 // Credits from shared utils of https://github.com/pingdotgg/uploadthing
 type PowOf2 = 1 | 2 | 4 | 8 | 16 | 32 | 64 | 128 | 256 | 512 | 1024;
 type SizeUnit = 'B' | 'KB' | 'MB' | 'GB';

From 6be9735db5d442ab9ac9a0d895020bcd39b0148a Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Fri, 12 Apr 2024 14:12:14 +0000
Subject: [PATCH 03/15] [autofix.ci] apply automated fixes

---
 playground/pages/blob.vue        | 2 +-
 src/runtime/server/utils/blob.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/playground/pages/blob.vue b/playground/pages/blob.vue
index f082113e..9ea89491 100644
--- a/playground/pages/blob.vue
+++ b/playground/pages/blob.vue
@@ -78,7 +78,7 @@ async function uploadFiles(files: File[]) {
       uploaded.push(part)
     }
 
-    const complete = await $fetch<SerializeObject<BlobObject>>(`/api/blob/mpu`, {
+    const complete = await $fetch<SerializeObject<BlobObject>>('/api/blob/mpu', {
       method: 'POST',
       query: {
         action: 'complete',
diff --git a/src/runtime/server/utils/blob.ts b/src/runtime/server/utils/blob.ts
index 0434a709..b464d4c4 100644
--- a/src/runtime/server/utils/blob.ts
+++ b/src/runtime/server/utils/blob.ts
@@ -378,7 +378,7 @@ export function proxyHubBlob(projectUrl: string, secretKey?: string) {
       return
     },
     async createMultipartUpload(pathname: string, options: BlobMultipartOptions = { addRandomSuffix: true }) {
-      return await blobAPI<BlobMultipartUpload>(`/mpu`, {
+      return await blobAPI<BlobMultipartUpload>('/mpu', {
         method: 'POST',
         query: {
           action: 'create',
@@ -410,7 +410,7 @@ export function proxyHubBlob(projectUrl: string, secretKey?: string) {
           })
         },
         async complete(uploadedParts: BlobUploadedPart[]): Promise<BlobObject> {
-          return await blobAPI<BlobObject>(`/mpu`, {
+          return await blobAPI<BlobObject>('/mpu', {
             method: 'POST',
             query: {
               action: 'complete',

From b3f60c1617ba614638e562f5e11214c86a1fe355 Mon Sep 17 00:00:00 2001
From: Teages <Teages@teages.xyz>
Date: Sat, 13 Apr 2024 01:05:37 +0800
Subject: [PATCH 04/15] fix: apply review

---
 playground/pages/blob.vue                     | 53 +++++++++--------
 playground/server/api/blob/mpu/index.post.ts  | 55 -----------------
 .../[...pathname].delete.ts                   |  9 +--
 .../api/blob/multipart/[...pathname].post.ts  | 23 ++++++++
 .../{mpu => multipart}/[...pathname].put.ts   | 20 +------
 .../api/blob/multipart/complete.post.ts       | 27 +++++++++
 playground/server/utils/stream.ts             | 15 +++++
 .../server/api/_hub/blob/[...pathname].put.ts | 19 +-----
 .../server/api/_hub/blob/mpu/index.post.ts    | 59 -------------------
 .../[...pathname].delete.ts                   | 13 ++--
 .../_hub/blob/multipart/[...pathname].post.ts | 30 ++++++++++
 .../{mpu => multipart}/[...pathname].put.ts   | 28 +++------
 .../api/_hub/blob/multipart/complete.post.ts  | 34 +++++++++++
 src/runtime/server/internal/utils/stream.ts   | 15 +++++
 src/runtime/server/utils/blob.ts              | 17 ++----
 15 files changed, 202 insertions(+), 215 deletions(-)
 delete mode 100644 playground/server/api/blob/mpu/index.post.ts
 rename playground/server/api/blob/{mpu => multipart}/[...pathname].delete.ts (71%)
 create mode 100644 playground/server/api/blob/multipart/[...pathname].post.ts
 rename playground/server/api/blob/{mpu => multipart}/[...pathname].put.ts (57%)
 create mode 100644 playground/server/api/blob/multipart/complete.post.ts
 create mode 100644 playground/server/utils/stream.ts
 delete mode 100644 src/runtime/server/api/_hub/blob/mpu/index.post.ts
 rename src/runtime/server/api/_hub/blob/{mpu => multipart}/[...pathname].delete.ts (73%)
 create mode 100644 src/runtime/server/api/_hub/blob/multipart/[...pathname].post.ts
 rename src/runtime/server/api/_hub/blob/{mpu => multipart}/[...pathname].put.ts (58%)
 create mode 100644 src/runtime/server/api/_hub/blob/multipart/complete.post.ts
 create mode 100644 src/runtime/server/internal/utils/stream.ts

diff --git a/playground/pages/blob.vue b/playground/pages/blob.vue
index 9ea89491..d63e3d31 100644
--- a/playground/pages/blob.vue
+++ b/playground/pages/blob.vue
@@ -49,13 +49,12 @@ async function uploadFiles(files: File[]) {
     const chunks = Math.ceil(file.size / chunkSize)
     const uploaded: BlobUploadedPart[] = []
 
-    const { pathname, uploadId } = await $fetch<{pathname: string, uploadId: string}>('/api/blob/mpu', {
-      method: 'POST',
-      query: {
-        action: 'create',
-        pathname: file.name,
+    const { pathname, uploadId } = await $fetch<{pathname: string, uploadId: string}>(
+      `/api/blob/multipart/${file.name}`,
+      {
+        method: 'POST',
       }
-    })
+    )
 
     for (let i = 0; i < chunks; i += 1) {
       const start = i * chunkSize
@@ -63,32 +62,36 @@ async function uploadFiles(files: File[]) {
       const partNumber = i + 1
       const chunk = file.slice(start, end)
 
-      const part = await $fetch<BlobUploadedPart>(`/api/blob/mpu/${pathname}`, {
-        params: {},
-        method: 'PUT',
-        body: await chunk.arrayBuffer(),
-        query: {
-          partNumber,
-          uploadId,
+      const part = await $fetch<BlobUploadedPart>(
+        `/api/blob/multipart/${pathname}`,
+        {
+          method: 'PUT',
+          query: {
+            uploadId,
+            partNumber,
+          },
+          body: chunk,
         }
-      })
+      )
 
       // optional: verify the etag and reupload if not match
 
       uploaded.push(part)
     }
 
-    const complete = await $fetch<SerializeObject<BlobObject>>('/api/blob/mpu', {
-      method: 'POST',
-      query: {
-        action: 'complete',
-        pathname,
-        uploadId,
-      },
-      body: {
-        parts: uploaded,
-      },
-    })
+    const complete = await $fetch<SerializeObject<BlobObject>>(
+      '/api/blob/multipart/complete',
+      {
+        method: 'POST',
+        query: {
+          pathname,
+          uploadId,
+        },
+        body: {
+          parts: uploaded,
+        },
+      }
+    )
 
     uploadedFiles.push(complete)
   }
diff --git a/playground/server/api/blob/mpu/index.post.ts b/playground/server/api/blob/mpu/index.post.ts
deleted file mode 100644
index e5838ab6..00000000
--- a/playground/server/api/blob/mpu/index.post.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { z } from 'zod'
-
-export default eventHandler(async (event) => {
-  const query = await getValidatedQuery(event, z.discriminatedUnion('action', [
-    z.object({
-      action: z.literal('create'),
-      pathname: z.string(),
-    }),
-    z.object({
-      action: z.literal('complete'),
-      pathname: z.string(),
-      uploadId: z.string(),
-    }),
-  ]).parse)
-
-  if (query.action === 'create') {
-    const options = await readValidatedBody(event, z.record(z.string(), z.any()).optional().parse)
-
-    const blob = hubBlob()
-
-    try {
-      const object = await blob.createMultipartUpload(query.pathname, options)
-      return {
-        uploadId: object.uploadId,
-        pathname: object.pathname,
-      }
-    } catch (e: any) {
-      throw createError({
-        statusCode: 400,
-        message: e.message
-      })
-    }
-  } else {
-    const { uploadId, pathname } = query
-    const { parts } = await readValidatedBody(event,z.object({
-      parts: z.array(z.object({
-        partNumber: z.number(),
-        etag: z.string(),
-      }))
-    }).parse)
-
-    const blob = hubBlob()
-
-    const mpu = blob.resumeMultipartUpload(pathname, uploadId)
-    try {
-      const object = await mpu.complete(parts)
-      return object
-    } catch (e: any) {
-      throw createError({
-        statusCode: 400,
-        message: e.message
-      })
-    }
-  }
-})
diff --git a/playground/server/api/blob/mpu/[...pathname].delete.ts b/playground/server/api/blob/multipart/[...pathname].delete.ts
similarity index 71%
rename from playground/server/api/blob/mpu/[...pathname].delete.ts
rename to playground/server/api/blob/multipart/[...pathname].delete.ts
index be6ecb9f..301c3eeb 100644
--- a/playground/server/api/blob/mpu/[...pathname].delete.ts
+++ b/playground/server/api/blob/multipart/[...pathname].delete.ts
@@ -1,8 +1,6 @@
 import { z } from 'zod'
 
 export default eventHandler(async (event) => {
-  const hub = hubBlob()
-
   const { pathname } = await getValidatedRouterParams(event, z.object({
     pathname: z.string().min(1)
   }).parse)
@@ -11,12 +9,15 @@ export default eventHandler(async (event) => {
     uploadId: z.string(),
   }).parse)
 
-  const mpu = hub.resumeMultipartUpload(pathname, uploadId)
+  const { resumeMultipartUpload } = hubBlob()
+  const mpu = resumeMultipartUpload(pathname, uploadId)
 
   try {
-    return await mpu.abort()
+    await mpu.abort()
   }
   catch (e: any) {
     throw createError({ status: 400, message: e.message })
   }
+
+  return sendNoContent(event)
 })
diff --git a/playground/server/api/blob/multipart/[...pathname].post.ts b/playground/server/api/blob/multipart/[...pathname].post.ts
new file mode 100644
index 00000000..90200194
--- /dev/null
+++ b/playground/server/api/blob/multipart/[...pathname].post.ts
@@ -0,0 +1,23 @@
+import { z } from 'zod'
+
+export default eventHandler(async (event) => {
+  const { pathname } = await getValidatedRouterParams(event, z.object({
+    pathname: z.string().min(1)
+  }).parse)
+
+  const options = await readValidatedBody(event, z.record(z.string(), z.any()).optional().parse)
+
+  const { createMultipartUpload } = hubBlob()
+  try {
+    const object = await createMultipartUpload(pathname, options)
+    return {
+      uploadId: object.uploadId,
+      pathname: object.pathname,
+    }
+  } catch (e: any) {
+    throw createError({
+      statusCode: 400,
+      message: e.message
+    })
+  }
+})
diff --git a/playground/server/api/blob/mpu/[...pathname].put.ts b/playground/server/api/blob/multipart/[...pathname].put.ts
similarity index 57%
rename from playground/server/api/blob/mpu/[...pathname].put.ts
rename to playground/server/api/blob/multipart/[...pathname].put.ts
index 2dc91ffc..6eda6d0e 100644
--- a/playground/server/api/blob/mpu/[...pathname].put.ts
+++ b/playground/server/api/blob/multipart/[...pathname].put.ts
@@ -1,21 +1,5 @@
 import { z } from 'zod'
 
-async function streamToArrayBuffer(stream: ReadableStream, streamSize: number) {
-  const result = new Uint8Array(streamSize)
-  let bytesRead = 0
-  const reader = stream.getReader()
-  // eslint-disable-next-line no-constant-condition
-  while (true) {
-    const { done, value } = await reader.read()
-    if (done) {
-      break
-    }
-    result.set(value, bytesRead)
-    bytesRead += value.length
-  }
-  return result
-}
-
 export default eventHandler(async (event) => {
   const { pathname } = await getValidatedRouterParams(event, z.object({
     pathname: z.string().min(1)
@@ -32,8 +16,8 @@ export default eventHandler(async (event) => {
   const body = await streamToArrayBuffer(stream, contentLength)
 
 
-  const hub = hubBlob()
-  const mpu = hub.resumeMultipartUpload(pathname, uploadId)
+  const { resumeMultipartUpload } = hubBlob()
+  const mpu = resumeMultipartUpload(pathname, uploadId)
 
   try {
     return await mpu.uploadPart(partNumber, body)
diff --git a/playground/server/api/blob/multipart/complete.post.ts b/playground/server/api/blob/multipart/complete.post.ts
new file mode 100644
index 00000000..8f5fcb1f
--- /dev/null
+++ b/playground/server/api/blob/multipart/complete.post.ts
@@ -0,0 +1,27 @@
+import { z } from 'zod'
+
+export default eventHandler(async (event) => {
+  const { pathname, uploadId } = await getValidatedQuery(event, z.object({
+    pathname: z.string().min(1),
+    uploadId: z.string().min(1),
+  }).parse)
+
+  const { parts } = await readValidatedBody(event,z.object({
+    parts: z.array(z.object({
+      partNumber: z.number(),
+      etag: z.string(),
+    }))
+  }).parse)
+
+  const { resumeMultipartUpload } = hubBlob()
+  const mpu = resumeMultipartUpload(pathname, uploadId)
+  try {
+    const object = await mpu.complete(parts)
+    return object
+  } catch (e: any) {
+    throw createError({
+      statusCode: 400,
+      message: e.message
+    })
+  }
+})
diff --git a/playground/server/utils/stream.ts b/playground/server/utils/stream.ts
new file mode 100644
index 00000000..d1273a5b
--- /dev/null
+++ b/playground/server/utils/stream.ts
@@ -0,0 +1,15 @@
+export async function streamToArrayBuffer(stream: ReadableStream, streamSize: number) {
+  const result = new Uint8Array(streamSize)
+  let bytesRead = 0
+  const reader = stream.getReader()
+  // eslint-disable-next-line no-constant-condition
+  while (true) {
+    const { done, value } = await reader.read()
+    if (done) {
+      break
+    }
+    result.set(value, bytesRead)
+    bytesRead += value.length
+  }
+  return result
+}
diff --git a/src/runtime/server/api/_hub/blob/[...pathname].put.ts b/src/runtime/server/api/_hub/blob/[...pathname].put.ts
index 4afd677a..336e830a 100644
--- a/src/runtime/server/api/_hub/blob/[...pathname].put.ts
+++ b/src/runtime/server/api/_hub/blob/[...pathname].put.ts
@@ -3,27 +3,12 @@ import { z } from 'zod'
 import { hubBlob } from '../../../utils/blob'
 import { requireNuxtHubAuthorization } from '../../../utils/auth'
 import { requireNuxtHubFeature } from '../../../utils/features'
-
-async function streamToArrayBuffer(stream: ReadableStream, streamSize: number) {
-  const result = new Uint8Array(streamSize)
-  let bytesRead = 0
-  const reader = stream.getReader()
-  // eslint-disable-next-line no-constant-condition
-  while (true) {
-    const { done, value } = await reader.read()
-    if (done) {
-      break
-    }
-    result.set(value, bytesRead)
-    bytesRead += value.length
-  }
-  return result
-}
+import { streamToArrayBuffer } from '../../../internal/utils/stream'
 
 export default eventHandler(async (event) => {
   await requireNuxtHubAuthorization(event)
   requireNuxtHubFeature('blob')
-  
+
   const { pathname } = await getValidatedRouterParams(event, z.object({
     pathname: z.string().min(1)
   }).parse)
diff --git a/src/runtime/server/api/_hub/blob/mpu/index.post.ts b/src/runtime/server/api/_hub/blob/mpu/index.post.ts
deleted file mode 100644
index 5674b8d7..00000000
--- a/src/runtime/server/api/_hub/blob/mpu/index.post.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { createError, eventHandler } from 'h3'
-import { z } from 'zod'
-import { hubBlob } from '../../../../utils/blob'
-import { requireNuxtHubAuthorization } from '../../../../utils/auth'
-import { requireNuxtHubFeature } from '../../../../utils/features'
-
-export default eventHandler(async (event) => {
-  await requireNuxtHubAuthorization(event)
-  requireNuxtHubFeature('blob')
-
-  const query = await getValidatedQuery(event, z.discriminatedUnion('action', [
-    z.object({
-      action: z.literal('create'),
-      pathname: z.string(),
-    }),
-    z.object({
-      action: z.literal('complete'),
-      pathname: z.string(),
-      uploadId: z.string(),
-    }),
-  ]).parse)
-
-  if (query.action === 'create') {
-    const options = await readValidatedBody(event, z.record(z.string(), z.any()).optional().parse)
-
-    const blob = hubBlob()
-
-    try {
-      const object = await blob.createMultipartUpload(query.pathname, options)
-      return object
-    } catch (e: any) {
-      throw createError({
-        statusCode: 500,
-        message: `Storage error: ${e.message}`
-      })
-    }
-  } else {
-    const { uploadId, pathname } = query
-    const { parts } = await readValidatedBody(event,z.object({
-      parts: z.array(z.object({
-        partNumber: z.number(),
-        etag: z.string(),
-      }))
-    }).parse)
-
-    const blob = hubBlob()
-
-    const mpu = blob.resumeMultipartUpload(pathname, uploadId)
-    try {
-      const object = await mpu.complete(parts)
-      return object
-    } catch (e: any) {
-      throw createError({
-        statusCode: 500,
-        message: `Storage error: ${e.message}`
-      })
-    }
-  }
-})
diff --git a/src/runtime/server/api/_hub/blob/mpu/[...pathname].delete.ts b/src/runtime/server/api/_hub/blob/multipart/[...pathname].delete.ts
similarity index 73%
rename from src/runtime/server/api/_hub/blob/mpu/[...pathname].delete.ts
rename to src/runtime/server/api/_hub/blob/multipart/[...pathname].delete.ts
index ce694f2c..66be3187 100644
--- a/src/runtime/server/api/_hub/blob/mpu/[...pathname].delete.ts
+++ b/src/runtime/server/api/_hub/blob/multipart/[...pathname].delete.ts
@@ -1,4 +1,4 @@
-import { createError, eventHandler } from 'h3'
+import { createError, eventHandler, sendNoContent } from 'h3'
 import { z } from 'zod'
 import { hubBlob } from '../../../../utils/blob'
 import { requireNuxtHubAuthorization } from '../../../../utils/auth'
@@ -17,15 +17,18 @@ export default eventHandler(async (event) => {
   }).parse)
 
 
-  const blob = hubBlob()
-  const mpu = blob.resumeMultipartUpload(pathname, uploadId)
+  const { resumeMultipartUpload } = hubBlob()
+  const { abort } = resumeMultipartUpload(pathname, uploadId)
 
   try {
-    await mpu.abort()
-  } catch (e: any) {
+    await abort()
+  }
+  catch (e: any) {
     throw createError({
       statusCode: 500,
       message: `Storage error: ${e.message}`
     })
   }
+
+  return sendNoContent(event)
 })
diff --git a/src/runtime/server/api/_hub/blob/multipart/[...pathname].post.ts b/src/runtime/server/api/_hub/blob/multipart/[...pathname].post.ts
new file mode 100644
index 00000000..a1b40d37
--- /dev/null
+++ b/src/runtime/server/api/_hub/blob/multipart/[...pathname].post.ts
@@ -0,0 +1,30 @@
+import { createError, eventHandler } from 'h3'
+import { z } from 'zod'
+import { hubBlob } from '../../../../utils/blob'
+import { requireNuxtHubAuthorization } from '../../../../utils/auth'
+import { requireNuxtHubFeature } from '../../../../utils/features'
+
+export default eventHandler(async (event) => {
+  await requireNuxtHubAuthorization(event)
+  requireNuxtHubFeature('blob')
+
+  const { pathname } = await getValidatedRouterParams(event, z.object({
+    pathname: z.string().min(1)
+  }).parse)
+
+  const options = await readValidatedBody(event, z.record(z.string(), z.any()).optional().parse)
+
+  const { createMultipartUpload } = hubBlob()
+  try {
+    const object = await createMultipartUpload(pathname, options)
+    return {
+      uploadId: object.uploadId,
+      pathname: object.pathname,
+    }
+  } catch (e: any) {
+    throw createError({
+      statusCode: 500,
+      message: `Storage error: ${e.message}`
+    })
+  }
+})
diff --git a/src/runtime/server/api/_hub/blob/mpu/[...pathname].put.ts b/src/runtime/server/api/_hub/blob/multipart/[...pathname].put.ts
similarity index 58%
rename from src/runtime/server/api/_hub/blob/mpu/[...pathname].put.ts
rename to src/runtime/server/api/_hub/blob/multipart/[...pathname].put.ts
index fb0a45de..514699ac 100644
--- a/src/runtime/server/api/_hub/blob/mpu/[...pathname].put.ts
+++ b/src/runtime/server/api/_hub/blob/multipart/[...pathname].put.ts
@@ -1,24 +1,9 @@
-import { createError, eventHandler } from 'h3'
+import { eventHandler, getValidatedRouterParams, getHeader, getRequestWebStream, getValidatedQuery } from 'h3'
 import { z } from 'zod'
 import { hubBlob } from '../../../../utils/blob'
 import { requireNuxtHubAuthorization } from '../../../../utils/auth'
 import { requireNuxtHubFeature } from '../../../../utils/features'
-
-async function streamToArrayBuffer(stream: ReadableStream, streamSize: number) {
-  const result = new Uint8Array(streamSize)
-  let bytesRead = 0
-  const reader = stream.getReader()
-  // eslint-disable-next-line no-constant-condition
-  while (true) {
-    const { done, value } = await reader.read()
-    if (done) {
-      break
-    }
-    result.set(value, bytesRead)
-    bytesRead += value.length
-  }
-  return result
-}
+import { streamToArrayBuffer } from '../../../../internal/utils/stream'
 
 export default eventHandler(async (event) => {
   await requireNuxtHubAuthorization(event)
@@ -30,7 +15,7 @@ export default eventHandler(async (event) => {
 
   const { uploadId, partNumber } = await getValidatedQuery(event, z.object({
     uploadId: z.string(),
-    partNumber: z.number()
+    partNumber: z.coerce.number(),
   }).parse)
 
   const contentLength = Number(getHeader(event, 'content-length') || '0')
@@ -38,11 +23,12 @@ export default eventHandler(async (event) => {
   const stream = getRequestWebStream(event)!
   const body = await streamToArrayBuffer(stream, contentLength)
 
-  const hub = hubBlob()
-  const mpu = hub.resumeMultipartUpload(pathname, uploadId)
+
+  const { resumeMultipartUpload } = hubBlob()
+  const { uploadPart } = resumeMultipartUpload(pathname, uploadId)
 
   try {
-    return await mpu.uploadPart(partNumber, body)
+    return await uploadPart(partNumber, body)
   } catch (e: any) {
     throw createError({
       statusCode: 500,
diff --git a/src/runtime/server/api/_hub/blob/multipart/complete.post.ts b/src/runtime/server/api/_hub/blob/multipart/complete.post.ts
new file mode 100644
index 00000000..bb715d7b
--- /dev/null
+++ b/src/runtime/server/api/_hub/blob/multipart/complete.post.ts
@@ -0,0 +1,34 @@
+import { createError, eventHandler, getValidatedQuery } from 'h3'
+import { z } from 'zod'
+import { hubBlob } from '../../../../utils/blob'
+import { requireNuxtHubAuthorization } from '../../../../utils/auth'
+import { requireNuxtHubFeature } from '../../../../utils/features'
+
+export default eventHandler(async (event) => {
+  await requireNuxtHubAuthorization(event)
+  requireNuxtHubFeature('blob')
+
+  const { pathname, uploadId } = await getValidatedQuery(event, z.object({
+    pathname: z.string().min(1),
+    uploadId: z.string().min(1),
+  }).parse)
+
+  const { parts } = await readValidatedBody(event, z.object({
+    parts: z.array(z.object({
+      partNumber: z.number(),
+      etag: z.string(),
+    }))
+  }).parse)
+
+  const { resumeMultipartUpload } = hubBlob()
+  const { complete } = resumeMultipartUpload(pathname, uploadId)
+  try {
+    const object = await complete(parts)
+    return object
+  } catch (e: any) {
+    throw createError({
+      statusCode: 500,
+      message: `Storage error: ${e.message}`
+    })
+  }
+})
diff --git a/src/runtime/server/internal/utils/stream.ts b/src/runtime/server/internal/utils/stream.ts
new file mode 100644
index 00000000..d1273a5b
--- /dev/null
+++ b/src/runtime/server/internal/utils/stream.ts
@@ -0,0 +1,15 @@
+export async function streamToArrayBuffer(stream: ReadableStream, streamSize: number) {
+  const result = new Uint8Array(streamSize)
+  let bytesRead = 0
+  const reader = stream.getReader()
+  // eslint-disable-next-line no-constant-condition
+  while (true) {
+    const { done, value } = await reader.read()
+    if (done) {
+      break
+    }
+    result.set(value, bytesRead)
+    bytesRead += value.length
+  }
+  return result
+}
diff --git a/src/runtime/server/utils/blob.ts b/src/runtime/server/utils/blob.ts
index b464d4c4..bcb4cc3d 100644
--- a/src/runtime/server/utils/blob.ts
+++ b/src/runtime/server/utils/blob.ts
@@ -378,12 +378,8 @@ export function proxyHubBlob(projectUrl: string, secretKey?: string) {
       return
     },
     async createMultipartUpload(pathname: string, options: BlobMultipartOptions = { addRandomSuffix: true }) {
-      return await blobAPI<BlobMultipartUpload>('/mpu', {
+      return await blobAPI<BlobMultipartUpload>(`/multipart/${decodeURI(pathname)}`, {
         method: 'POST',
-        query: {
-          action: 'create',
-          pathname: decodeURI(pathname),
-        },
         body: options,
       })
     },
@@ -392,7 +388,7 @@ export function proxyHubBlob(projectUrl: string, secretKey?: string) {
         pathname,
         uploadId,
         async uploadPart(partNumber: number, body: string | ReadableStream<any> | ArrayBuffer | ArrayBufferView | Blob): Promise<BlobUploadedPart> {
-          return await blobAPI<BlobUploadedPart>(`/mpu/${decodeURI(pathname)}`, {
+          return await blobAPI<BlobUploadedPart>(`/multipart/${decodeURI(pathname)}`, {
             method: 'PUT',
             query: {
               uploadId,
@@ -402,23 +398,22 @@ export function proxyHubBlob(projectUrl: string, secretKey?: string) {
           })
         },
         async abort(): Promise<void> {
-          return await blobAPI<void>(`/mpu/${decodeURI(pathname)}`, {
+          return await blobAPI<void>(`/multipart/${decodeURI(pathname)}`, {
             method: 'DELETE',
             query: {
               uploadId,
             },
           })
         },
-        async complete(uploadedParts: BlobUploadedPart[]): Promise<BlobObject> {
-          return await blobAPI<BlobObject>('/mpu', {
+        async complete(parts: BlobUploadedPart[]): Promise<BlobObject> {
+          return await blobAPI<BlobObject>('/multipart/complete', {
             method: 'POST',
             query: {
-              action: 'complete',
               pathname,
               uploadId,
             },
             body: {
-              parts: uploadedParts,
+              parts,
             },
           })
         },

From e9cd11b4656a55831b352d2e6cb3febfdada0309 Mon Sep 17 00:00:00 2001
From: Teages <Teages@teages.xyz>
Date: Thu, 18 Apr 2024 09:05:01 +0800
Subject: [PATCH 05/15] docs: multipart upload

---
 docs/content/docs/2.storage/3.blob.md | 169 ++++++++++++++++++++++++++
 1 file changed, 169 insertions(+)

diff --git a/docs/content/docs/2.storage/3.blob.md b/docs/content/docs/2.storage/3.blob.md
index 12261069..60b5df8e 100644
--- a/docs/content/docs/2.storage/3.blob.md
+++ b/docs/content/docs/2.storage/3.blob.md
@@ -189,6 +189,150 @@ You can also use the `delete()` method as alias of `del()`.
 
 Returns nothing.
 
+### `createMultipartUpload()`
+
+Start a new multipart upload.
+
+```ts [server/api/files/multipart/[...pathname\\].post.ts]
+export default eventHandler(async (event) => {
+  const { pathname } = getRouterParams(event)
+
+  const mpu = await hubBlob().createMultipartUpload(pathname)
+
+  return {
+    uploadId: mpu.uploadId,
+    pathname: mpu.pathname,
+  }
+})
+```
+
+#### Params
+
+::field-group
+  ::field{name="pathname" type="String"}
+    The name of the blob to serve.
+  ::
+  ::field{name="options" type="Object"}
+    The put options. Any other provided field will be stored in the blob's metadata.
+    ::field{name="contentType" type="String"}
+      The content type of the blob. If not given, it will be inferred from the Blob or the file extension.
+    ::
+    ::field{name="contentLength" type="String"}
+      The content length of the blob.
+    ::
+    ::field{name="addRandomSuffix" type="Boolean"}
+      If `true`, a random suffix will be added to the blob's name. Defaults to `true`.
+    ::
+  ::
+::
+
+#### Return
+
+Returns a `BlobMultipartUpload`
+
+### `resumeMultipartUpload()`
+
+Continue processing of unfinished multipart upload.
+
+To upload a part of the multipart upload, you can use the `uploadPart()` method:
+
+```ts [server/api/files/multipart/[...pathname\\].put.ts]
+export default eventHandler(async (event) => {
+  const { pathname } = getRouterParams(event)
+  const { uploadId, partNumber } = getQuery(event)
+
+  const stream = getRequestWebStream(event)!
+  const body = await streamToArrayBuffer(stream, contentLength)
+
+  const mpu = hubBlob().resumeMultipartUpload(pathname, uploadId)
+  return await mpu.uploadPart(partNumber, body)
+})
+```
+
+Complete the upload by calling `complete()` method:
+
+```ts [server/api/files/multipart/complete.post.ts]
+export default eventHandler(async (event) => {
+  const { pathname, uploadId } = getQuery(event)
+  const parts = await readBody(event)
+
+  const mpu = hubBlob().resumeMultipartUpload(pathname, uploadId)
+  return await mpu.complete(parts)
+})
+```
+
+If you want to cancel the upload, you need to call `abort()` method: 
+
+```ts [server/api/files/multipart/[...pathname\\].delete.ts]
+export default eventHandler(async (event) => {
+  const { pathname } = getRouterParams(event)
+  const { uploadId } = getQuery(event)
+
+  const mpu = hubBlob().resumeMultipartUpload(pathname, uploadId)
+  await mpu.abort()
+
+  return sendNoContent(event)
+})
+```
+
+A simple example of multipart upload in client with above routes:
+
+```ts
+async function uploadLargeFile(file: File) {
+  const chunkSize = 10 * 1024 * 1024 // 10MB
+
+  const count = Math.ceil(file.size / chunkSize)
+  const { pathname, uploadId } = await $fetch(
+    `/api/files/multipart/${file.name}`,
+    { method: 'POST' },
+  )
+
+  const uploaded = []
+
+  for (let i = 0; i < count; i++) {
+    const start = i * chunkSize
+    const end = Math.min(start + chunkSize, file.size)
+    const partNumber = i + 1
+    const chunk = file.slice(start, end)
+
+    const part = await $fetch(
+      `/api/files/multipart/${pathname}`,
+      {
+        method: 'PUT',
+        query: { uploadId, partNumber },
+        body: chunk,
+      },
+    )
+
+    uploaded.push(part)
+  }
+
+  return await $fetch(
+    '/api/files/multipart/complete',
+    {
+      method: 'POST',
+      query: { pathname, uploadId },
+      body: { parts: uploaded },
+    },
+  )
+}
+```
+
+#### Params
+
+::field-group
+  ::field{name="pathname" type="String"}
+    The name of the blob to serve.
+  ::
+  ::field{name="uploadId" type="String"}
+    The upload ID of the multipart upload.
+  ::
+::
+
+#### Return
+
+Returns a `BlobMultipartUpload`
+
 
 ## `ensureBlob()`
 
@@ -236,3 +380,28 @@ interface BlobObject {
   uploadedAt: Date
 }
 ```
+
+### `BlobMultipartUpload`
+
+```ts
+export interface BlobMultipartUpload {
+  pathname: string
+  uploadId: string
+  uploadPart(
+    partNumber: number,
+    value: string | ReadableStream<any> | ArrayBuffer | ArrayBufferView | Blob
+  ): Promise<BlobUploadedPart>
+  abort(): Promise<void>
+  complete(uploadedParts: BlobUploadedPart[]): Promise<BlobObject>
+}
+
+```
+
+### `BlobUploadedPart`
+
+```ts
+export interface BlobUploadedPart {
+  partNumber: number;
+  etag: string;
+}
+```

From efedbe136e4640f4101635aff7cd1aa45a79bae5 Mon Sep 17 00:00:00 2001
From: Teages <Teages@teages.xyz>
Date: Sun, 21 Apr 2024 14:14:07 +0800
Subject: [PATCH 06/15] feat: multipart upload composable

---
 playground/composables/multipart.ts  |  33 +++++
 playground/pages/blob.vue            |  82 +++++------
 src/module.ts                        |   3 +-
 src/runtime/composables/multipart.ts | 213 +++++++++++++++++++++++++++
 4 files changed, 281 insertions(+), 50 deletions(-)
 create mode 100644 playground/composables/multipart.ts
 create mode 100644 src/runtime/composables/multipart.ts

diff --git a/playground/composables/multipart.ts b/playground/composables/multipart.ts
new file mode 100644
index 00000000..9fb9bb92
--- /dev/null
+++ b/playground/composables/multipart.ts
@@ -0,0 +1,33 @@
+import type { SerializeObject } from 'nitropack'
+
+export const useMultipartUpload = createMultipartUploader({
+  create: (file) => $fetch<{pathname: string, uploadId: string}>(
+    `/api/blob/multipart/${file.name}`,
+    { method: 'POST' },
+  ),
+  upload: ({ partNumber, chunkBody }, { pathname, uploadId }) =>
+    $fetch<BlobUploadedPart>(
+      `/api/blob/multipart/${pathname}`,
+      {
+        method: 'PUT',
+        query: { uploadId, partNumber },
+        body: chunkBody,
+      },
+    ),
+  complete: (parts, { pathname, uploadId }) =>
+    $fetch<SerializeObject<BlobObject>>(
+      '/api/blob/multipart/complete',
+      {
+        method: 'POST',
+        query: { pathname, uploadId },
+        body: { parts },
+      },
+    ),
+
+  abort: ({ pathname, uploadId }) =>
+    $fetch<void>(`/api/blob/multipart/${pathname}`, {
+      method: 'DELETE',
+      query: { uploadId },
+    }),
+  concurrent: 2,
+})
diff --git a/playground/pages/blob.vue b/playground/pages/blob.vue
index d63e3d31..638293a3 100644
--- a/playground/pages/blob.vue
+++ b/playground/pages/blob.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import type { SerializeObject } from 'nitropack'
-
 const loading = ref(false)
+const loadingProgress = ref<number | null>(null)
 const newFilesValue = ref<File[]>([])
 const uploadRef = ref()
 
@@ -19,7 +18,9 @@ async function addFile () {
   try {
     const uploadedFiles = await uploadFiles(newFilesValue.value)
     files.value!.push(...uploadedFiles)
-    toast.add({ title: `File${uploadedFiles.length > 1 ? 's' : ''} uploaded.` })
+    if (uploadedFiles.length > 0) {
+      toast.add({ title: `File${uploadedFiles.length > 1 ? 's' : ''} uploaded.` })
+    }
     newFilesValue.value = []
   } catch (err: any) {
     const title = err.data?.data?.issues?.map((issue: any) => issue.message).join('\n') || err.message
@@ -30,7 +31,6 @@ async function addFile () {
 
 async function uploadFiles(files: File[]) {
   const bigFileLimit = 10 * 1024 * 1024 // 10MB
-  const chunkSize = 10 * 1024 * 1024 // 10MB
 
   const bigFiles = files.filter((file) => file.size > bigFileLimit)
   const smallFiles = files.filter((file) => file.size <= bigFileLimit)
@@ -46,54 +46,38 @@ async function uploadFiles(files: File[]) {
 
   // upload big files
   for (const file of bigFiles) {
-    const chunks = Math.ceil(file.size / chunkSize)
-    const uploaded: BlobUploadedPart[] = []
-
-    const { pathname, uploadId } = await $fetch<{pathname: string, uploadId: string}>(
-      `/api/blob/multipart/${file.name}`,
-      {
-        method: 'POST',
-      }
-    )
-
-    for (let i = 0; i < chunks; i += 1) {
-      const start = i * chunkSize
-      const end = Math.min(start + chunkSize, file.size)
-      const partNumber = i + 1
-      const chunk = file.slice(start, end)
-
-      const part = await $fetch<BlobUploadedPart>(
-        `/api/blob/multipart/${pathname}`,
-        {
-          method: 'PUT',
-          query: {
-            uploadId,
-            partNumber,
-          },
-          body: chunk,
+    const { completed, progress, cancel } = useMultipartUpload(file)
+
+    const uploadingToast = toast.add({
+      title: `Uploading Large File...`,
+      description: file.name,
+      color: 'sky',
+      timeout: 0,
+      closeButton: {
+        color: 'red',
+        variant: 'solid',
+      },
+      callback: () => {
+        if (progress.value !== 1) {
+          cancel()
         }
-      )
-
-      // optional: verify the etag and reupload if not match
+      }
+    })
+    watch(progress, v => loadingProgress.value = v)
 
-      uploaded.push(part)
-    }
+    const complete = await completed
 
-    const complete = await $fetch<SerializeObject<BlobObject>>(
-      '/api/blob/multipart/complete',
-      {
-        method: 'POST',
-        query: {
-          pathname,
-          uploadId,
-        },
-        body: {
-          parts: uploaded,
-        },
-      }
-    )
+    loadingProgress.value = null
+    toast.remove(uploadingToast.id)
 
-    uploadedFiles.push(complete)
+    if (complete) {
+      uploadedFiles.push(complete)
+    } else {
+      toast.add({
+        title: `Failed to upload ${file.name}.`,
+        color: 'red'
+      })
+    }
   }
 
   return uploadedFiles
@@ -155,7 +139,7 @@ async function deleteFile (pathname: string) {
       </UButtonGroup>
     </div>
 
-    <UProgress v-if="loading" class="mt-2" />
+    <UProgress v-if="loading" :value="loadingProgress" :max="1" class="mt-2" />
 
     <div v-if="files?.length" class="grid grid-cols-1 md:grid-cols-3 gap-2 mt-4">
       <UCard
diff --git a/src/module.ts b/src/module.ts
index 84a80b5f..9ea823a1 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, logger, addServerScanDir, installModule, addServerImportsDir } from '@nuxt/kit'
+import { defineNuxtModule, createResolver, logger, addServerScanDir, installModule, addServerImportsDir, addImportsDir } from '@nuxt/kit'
 import { join } from 'pathe'
 import { defu } from 'defu'
 import { mkdir, writeFile, readFile } from 'node:fs/promises'
@@ -153,6 +153,7 @@ export default defineNuxtModule<ModuleOptions>({
 
     // Register composables
     addServerImportsDir(resolve('./runtime/server/utils'))
+    addImportsDir(resolve('./runtime/composables'))
 
     // Within CF Pages CI/CD to notice NuxtHub about the build and hub config
     if (!nuxt.options.dev && process.env.CF_PAGES && process.env.NUXT_HUB_PROJECT_DEPLOY_TOKEN && process.env.NUXT_HUB_PROJECT_KEY && process.env.NUXT_HUB_ENV) {
diff --git a/src/runtime/composables/multipart.ts b/src/runtime/composables/multipart.ts
new file mode 100644
index 00000000..009aefef
--- /dev/null
+++ b/src/runtime/composables/multipart.ts
@@ -0,0 +1,213 @@
+import defu from 'defu'
+import { randomUUID } from 'uncrypto'
+import { readonly, type Ref } from 'vue'
+import { useState } from '#imports'
+
+/**
+ * Create a multipart uploader.
+ */
+export function createMultipartUploader<
+  TCreateResponse,
+  TUploadResponse,
+  TCompleteResponse,
+> (
+  options: MultipartUploaderOptions<
+    TCreateResponse,
+    TUploadResponse,
+    TCompleteResponse
+  >
+): MultipartUploader<TCreateResponse, TUploadResponse, TCompleteResponse> {
+  const opts = defu(options, {
+    partSize: 10 * 1024 * 1024, // 10MB
+    concurrent: 1, // 1 concurrent uploads
+    maxRetry: 3, // max retry attempts for the whole upload
+  })
+
+  // useMultipartUpload
+  return (file, optionsOverride = {}) => {
+    const {
+      create,
+      upload,
+      complete,
+      abort,
+      partSize,
+      concurrent,
+      maxRetry,
+      verify,
+    } = defu(optionsOverride, opts)
+
+    const data = create(file)
+    const chunks = Math.ceil(file.size / partSize)
+
+    const queue = Array.from({ length: chunks }, (_, i) => i + 1)
+    const parts: TUploadResponse[] = []
+    const progress = useState(randomUUID(), () => 0)
+    const errors: Error[] = []
+    let canceled = false
+
+    const cancel = async () => {
+      if (canceled) {
+        return
+      }
+      canceled = true
+      queue.splice(0, queue.length)
+      if (abort) {
+        await abort(await data, file)
+      }
+    }
+
+    const prepare = (partNumber: number) => {
+      const start = (partNumber - 1) * partSize
+      const end = Math.min(start + partSize, file.size)
+      const chunkBody = file.slice(start, end)
+      return { partNumber, chunkBody }
+    }
+
+    const process = async (partNumber: number) => {
+      const prepared = prepare(partNumber)
+      try {
+        const part = await upload(prepared, await data, file)
+
+        if (verify && !await verify(part, prepared)) {
+          throw new Error('Verification failed')
+        }
+
+        progress.value = parts.length / chunks
+        parts.push(part)
+      } catch (e) {
+        errors.push(e as Error)
+        queue.push(partNumber)
+
+        if (errors.length >= maxRetry) {
+          cancel()
+          throw new Error('Upload failed')
+        }
+      }
+
+      // process next chunk
+      const next = queue.shift()
+      if (next) {
+        await process(next)
+      }
+    }
+
+    const start = async () => {
+      try {
+        await Promise.all(Array.from({ length: concurrent }).map(() => {
+          const partNumber = queue.shift()
+          if (partNumber) {
+            return process(partNumber)
+          }
+        }))
+      } catch (error) {
+        return
+      }
+      if (canceled || parts.length < chunks) {
+        return
+      }
+
+      return complete(parts, await data, file)
+    }
+
+    return {
+      completed: start(),
+      progress: readonly(progress),
+      cancel,
+    }
+  }
+}
+
+export interface MultipartUploaderOptions<
+  TCreateResponse,
+  TUploadResponse,
+  TCompleteResponse,
+> {
+  /**
+   * Provide a function to create the initial data for the upload.
+   */
+  create: (file: File) => Promise<TCreateResponse> | TCreateResponse
+  /**
+   * Provide a function to upload a chunk of the file.
+   */
+  upload: (
+    chunk: {
+      partNumber: number,
+      chunkBody: Blob,
+    },
+    data: TCreateResponse,
+    file: File,
+  ) => Promise<TUploadResponse> | TUploadResponse
+  /**
+   * Provide a function to complete the upload.
+   */
+  complete: (
+    parts: TUploadResponse[],
+    data: TCreateResponse,
+    file: File,
+  ) => Promise<TCompleteResponse> | TCompleteResponse
+  /**
+   * Provide a function to abort the upload.
+   */
+  abort?: (data: TCreateResponse, file: File) => Promise<void> | void
+  /**
+   * Provide a function to verify the upload response.
+   */
+  verify?: (
+    response: TUploadResponse,
+    chunk: {
+      partNumber: number,
+      chunkBody: Blob,
+    },
+  ) => Promise<boolean> | boolean
+
+  /**
+   * The size of each part of the file to be uploaded.
+   * @default 10 * 1024 * 1024
+   */
+  partSize?: number
+  /**
+   * The maximum number of concurrent uploads.
+   * @default 1
+   */
+  concurrent?: number
+  /**
+   * The maximum number of retry attempts for the whole upload.
+   * @default 3
+   */
+  maxRetry?: number
+}
+
+export type MultipartUploader<
+  TCreateResponse,
+  TUploadResponse,
+  TCompleteResponse,
+> = (
+  /**
+   * The file to be uploaded.
+   */
+  file: File,
+  /**
+   * Options to override the default options.
+   */
+  optionsOverride?: Partial<Omit<
+    MultipartUploaderOptions<
+      TCreateResponse,
+      TUploadResponse,
+      TCompleteResponse
+    >,
+    'create' | 'upload' | 'complete' | 'abort'
+  >>
+) => {
+  /**
+   * The promise that resolves to the complete response or undefined if the upload is canceled or failed.
+   */
+  completed: Promise<TCompleteResponse | undefined>
+  /**
+   * The progress of the upload as a number between 0 and 1.
+   */
+  progress: Readonly<Ref<number>>
+  /**
+   * Cancel the upload.
+   */
+  cancel: () => Promise<void>
+}

From 53958e436696f90d5c149983c5abb0eba5e60295 Mon Sep 17 00:00:00 2001
From: Teages <Teages@teages.xyz>
Date: Sun, 21 Apr 2024 15:11:39 +0800
Subject: [PATCH 07/15] docs: multipart upload composable

---
 docs/content/docs/2.storage/3.blob.md | 114 +++++++++++++++++++++++++-
 src/runtime/composables/multipart.ts  |  15 ++--
 2 files changed, 120 insertions(+), 9 deletions(-)

diff --git a/docs/content/docs/2.storage/3.blob.md b/docs/content/docs/2.storage/3.blob.md
index 60b5df8e..6b54ad29 100644
--- a/docs/content/docs/2.storage/3.blob.md
+++ b/docs/content/docs/2.storage/3.blob.md
@@ -368,6 +368,86 @@ Returns nothing.
 
 Throws an error if `file` doesn't meet the requirements.
 
+
+## `createMultipartUploader()`
+
+Client composable that creates a multipart upload helper.
+
+```ts
+export const useMultipartUpload = createMultipartUploader({
+  create: (file) => $fetch(
+    `/api/files/multipart/${file.name}`,
+    { method: 'POST' },
+  ),
+  upload: ({ partNumber, chunkBody }, { pathname, uploadId }) =>
+    $fetch(
+      `/api/files/multipart/${pathname}`,
+      {
+        method: 'PUT',
+        query: { uploadId, partNumber },
+        body: chunkBody,
+      },
+    ),
+  complete: (parts, { pathname, uploadId }) =>
+    $fetch('/api/files/multipart/complete',
+      {
+        method: 'POST',
+        query: { pathname, uploadId },
+        body: { parts },
+      },
+    ),
+  abort: ({ pathname, uploadId }) =>
+    $fetch(`/api/files/multipart/${pathname}`, {
+      method: 'DELETE',
+      query: { uploadId },
+    }),
+})
+```
+
+### Params
+
+::field-group
+  ::field{name="options" type="MultipartUploaderOptions<TCreateResponse, TUploadResponse, TCompleteResponse>" required}
+    The options for the multipart upload helper.
+    ::field{name="create" type="(file: File) => Promise<TCreateResponse> | TCreateResponse" required}
+      Provide a function to create the initial data for the upload.
+    ::
+    ::field{name="upload" type="(chunk: MultipartUploadChunk, data: TCreateResponse, file: File) => Promise<TUploadResponse> | TUploadResponse" required}
+      Provide a function to upload a chunk of the file.
+    ::
+    ::field{name="complete" type="(parts: TUploadResponse[], data: TCreateResponse, file: File) => void" required}
+      Provide a function to complete the upload.
+    ::
+    ::field{name="abort" type="(data: TCreateResponse, file: File) => Promise<void> | void"}
+      Provide a function to abort the upload.
+    ::
+    ::field{name="verify" type="(response: TUploadResponse, chunk: MultipartUploadChunk) => Promise<boolean> | boolean"}
+      Provide a function to verify the upload response. Defaults to `() => true`.
+    ::
+    ::field{name="partSize" type="number"}
+      The size of each part of the file to be uploaded. Defaults to `10MB`.
+    ::
+    ::field{name="concurrent" type="number"}
+      The maximum number of concurrent uploads. Defaults to `1`.
+    ::
+    ::field{name="maxRetry" type="number"}
+      The maximum number of retry attempts for the whole upload. Defaults to `3`.
+    ::
+  ::
+::
+
+### Return
+
+Return a `MultipartUploader` function that can be used to upload a file in parts.
+
+```ts
+export function upload(file: File) {
+  const { completed, progress, cancel } = useMultipartUpload(file)
+  return await completed
+}
+```
+
+
 ## Types
 
 ### `BlobObject`
@@ -394,7 +474,6 @@ export interface BlobMultipartUpload {
   abort(): Promise<void>
   complete(uploadedParts: BlobUploadedPart[]): Promise<BlobObject>
 }
-
 ```
 
 ### `BlobUploadedPart`
@@ -405,3 +484,36 @@ export interface BlobUploadedPart {
   etag: string;
 }
 ```
+
+### `MultipartUploader`
+
+```ts
+export type MultipartUploader<
+  TCreateResponse,
+  TUploadResponse,
+  TCompleteResponse,
+> = (
+  file: File,
+  optionsOverride?: Partial<Omit<
+    MultipartUploaderOptions<
+      TCreateResponse,
+      TUploadResponse,
+      TCompleteResponse
+    >,
+    'create' | 'upload' | 'complete' | 'abort'
+  >>
+) => {
+  completed: Promise<TCompleteResponse | undefined>
+  progress: Readonly<Ref<number>>
+  cancel: () => Promise<void>
+}
+```
+
+### `MultipartUploadChunk`
+
+```ts
+export interface MultipartUploadChunk {
+  partNumber: number
+  chunkBody: Blob
+}
+```
diff --git a/src/runtime/composables/multipart.ts b/src/runtime/composables/multipart.ts
index 009aefef..e003302c 100644
--- a/src/runtime/composables/multipart.ts
+++ b/src/runtime/composables/multipart.ts
@@ -117,6 +117,11 @@ export function createMultipartUploader<
   }
 }
 
+export interface MultipartUploadChunk {
+  partNumber: number
+  chunkBody: Blob
+}
+
 export interface MultipartUploaderOptions<
   TCreateResponse,
   TUploadResponse,
@@ -130,10 +135,7 @@ export interface MultipartUploaderOptions<
    * Provide a function to upload a chunk of the file.
    */
   upload: (
-    chunk: {
-      partNumber: number,
-      chunkBody: Blob,
-    },
+    chunk: MultipartUploadChunk,
     data: TCreateResponse,
     file: File,
   ) => Promise<TUploadResponse> | TUploadResponse
@@ -154,10 +156,7 @@ export interface MultipartUploaderOptions<
    */
   verify?: (
     response: TUploadResponse,
-    chunk: {
-      partNumber: number,
-      chunkBody: Blob,
-    },
+    chunk: MultipartUploadChunk,
   ) => Promise<boolean> | boolean
 
   /**

From b4e0b53251a25a0f47afdf024a92251531638379 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxtlabs.com>
Date: Thu, 25 Apr 2024 15:07:54 +0200
Subject: [PATCH 08/15] Update docs/content/docs/2.storage/3.blob.md

---
 docs/content/docs/2.storage/3.blob.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/docs/2.storage/3.blob.md b/docs/content/docs/2.storage/3.blob.md
index 6b54ad29..8df0215d 100644
--- a/docs/content/docs/2.storage/3.blob.md
+++ b/docs/content/docs/2.storage/3.blob.md
@@ -277,7 +277,7 @@ export default eventHandler(async (event) => {
 
 A simple example of multipart upload in client with above routes:
 
-```ts
+```ts [utils/multipart-upload.ts]
 async function uploadLargeFile(file: File) {
   const chunkSize = 10 * 1024 * 1024 // 10MB
 

From 0204f06fe50cf97c687f682dbc2078cf4b870f08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxtlabs.com>
Date: Thu, 25 Apr 2024 15:15:19 +0200
Subject: [PATCH 09/15] Update src/runtime/composables/multipart.ts

---
 src/runtime/composables/multipart.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/runtime/composables/multipart.ts b/src/runtime/composables/multipart.ts
index e003302c..311f475a 100644
--- a/src/runtime/composables/multipart.ts
+++ b/src/runtime/composables/multipart.ts
@@ -182,7 +182,7 @@ export type MultipartUploader<
   TCompleteResponse,
 > = (
   /**
-   * The file to be uploaded.
+   * The file to upload.
    */
   file: File,
   /**

From 2696bcb3482ba55aea1a73ce5bcf43469d1513f9 Mon Sep 17 00:00:00 2001
From: Teages <Teages@teages.xyz>
Date: Fri, 26 Apr 2024 02:21:17 +0800
Subject: [PATCH 10/15] feat: simplify multipart upload

---
 docs/content/docs/2.storage/3.blob.md         | 128 +++++--------
 playground/composables/multipart.ts           |  33 ----
 playground/pages/blob.vue                     |  17 +-
 .../blob/multipart/[...pathname].delete.ts    |  23 ---
 .../api/blob/multipart/[...pathname].post.ts  |  23 ---
 .../api/blob/multipart/[...pathname].put.ts   |  27 ---
 .../blob/multipart/[action]/[...pathname].ts  |   3 +
 .../api/blob/multipart/complete.post.ts       |  27 ---
 playground/server/utils/stream.ts             |  15 --
 src/runtime/composables/multipart.ts          | 177 ++++++++----------
 src/runtime/server/utils/blob.ts              | 175 ++++++++++++++++-
 11 files changed, 315 insertions(+), 333 deletions(-)
 delete mode 100644 playground/composables/multipart.ts
 delete mode 100644 playground/server/api/blob/multipart/[...pathname].delete.ts
 delete mode 100644 playground/server/api/blob/multipart/[...pathname].post.ts
 delete mode 100644 playground/server/api/blob/multipart/[...pathname].put.ts
 create mode 100644 playground/server/api/blob/multipart/[action]/[...pathname].ts
 delete mode 100644 playground/server/api/blob/multipart/complete.post.ts
 delete mode 100644 playground/server/utils/stream.ts

diff --git a/docs/content/docs/2.storage/3.blob.md b/docs/content/docs/2.storage/3.blob.md
index 8df0215d..529e8439 100644
--- a/docs/content/docs/2.storage/3.blob.md
+++ b/docs/content/docs/2.storage/3.blob.md
@@ -191,6 +191,10 @@ Returns nothing.
 
 ### `createMultipartUpload()`
 
+::note
+We suggest to use [`handleMultipartUpload()`](#handlemultipartupload) method to handle the multipart upload request.
+::
+
 Start a new multipart upload.
 
 ```ts [server/api/files/multipart/[...pathname\\].post.ts]
@@ -232,6 +236,10 @@ Returns a `BlobMultipartUpload`
 
 ### `resumeMultipartUpload()`
 
+::note
+We suggest to use [`handleMultipartUpload()`](#handlemultipartupload) method to handle the multipart upload request.
+::
+
 Continue processing of unfinished multipart upload.
 
 To upload a part of the multipart upload, you can use the `uploadPart()` method:
@@ -333,6 +341,32 @@ async function uploadLargeFile(file: File) {
 
 Returns a `BlobMultipartUpload`
 
+### `handleMultipartUpload()`
+
+Handle the multipart upload request.
+
+::note
+Make sure your route includes `[action]` and `[...pathname]` params.
+::
+
+```ts [server/api/files/multipart/[action\\]/[...pathname\\].ts]
+export default eventHandler(async (event) => {
+  await hubBlob().handleMultipartUpload(event)
+})
+```
+
+::note
+Use [`useMultipartUpload()`](#usemultipartupload) to upload in client.
+::
+
+#### Params
+
+::field-group
+  ::field{name="event" type="H3Event" required}
+    The event to handle.
+  ::
+::
+
 
 ## `ensureBlob()`
 
@@ -369,61 +403,22 @@ Returns nothing.
 Throws an error if `file` doesn't meet the requirements.
 
 
-## `createMultipartUploader()`
+## `useMultipartUpload()`
 
 Client composable that creates a multipart upload helper.
 
-```ts
-export const useMultipartUpload = createMultipartUploader({
-  create: (file) => $fetch(
-    `/api/files/multipart/${file.name}`,
-    { method: 'POST' },
-  ),
-  upload: ({ partNumber, chunkBody }, { pathname, uploadId }) =>
-    $fetch(
-      `/api/files/multipart/${pathname}`,
-      {
-        method: 'PUT',
-        query: { uploadId, partNumber },
-        body: chunkBody,
-      },
-    ),
-  complete: (parts, { pathname, uploadId }) =>
-    $fetch('/api/files/multipart/complete',
-      {
-        method: 'POST',
-        query: { pathname, uploadId },
-        body: { parts },
-      },
-    ),
-  abort: ({ pathname, uploadId }) =>
-    $fetch(`/api/files/multipart/${pathname}`, {
-      method: 'DELETE',
-      query: { uploadId },
-    }),
-})
+```ts [utils/multipart-upload.ts]
+export const upload = useMultipartUpload('/api/files/multipart')
 ```
 
 ### Params
 
 ::field-group
-  ::field{name="options" type="MultipartUploaderOptions<TCreateResponse, TUploadResponse, TCompleteResponse>" required}
+  ::field{name="baseURL" type="string"}
+    The base URL of the multipart upload API handled by [`handleMultipartUpload()`](#handlemultipartupload).
+  ::
+  ::field{name="options"}
     The options for the multipart upload helper.
-    ::field{name="create" type="(file: File) => Promise<TCreateResponse> | TCreateResponse" required}
-      Provide a function to create the initial data for the upload.
-    ::
-    ::field{name="upload" type="(chunk: MultipartUploadChunk, data: TCreateResponse, file: File) => Promise<TUploadResponse> | TUploadResponse" required}
-      Provide a function to upload a chunk of the file.
-    ::
-    ::field{name="complete" type="(parts: TUploadResponse[], data: TCreateResponse, file: File) => void" required}
-      Provide a function to complete the upload.
-    ::
-    ::field{name="abort" type="(data: TCreateResponse, file: File) => Promise<void> | void"}
-      Provide a function to abort the upload.
-    ::
-    ::field{name="verify" type="(response: TUploadResponse, chunk: MultipartUploadChunk) => Promise<boolean> | boolean"}
-      Provide a function to verify the upload response. Defaults to `() => true`.
-    ::
     ::field{name="partSize" type="number"}
       The size of each part of the file to be uploaded. Defaults to `10MB`.
     ::
@@ -433,18 +428,20 @@ export const useMultipartUpload = createMultipartUploader({
     ::field{name="maxRetry" type="number"}
       The maximum number of retry attempts for the whole upload. Defaults to `3`.
     ::
+    ::field{name="fetchOptions" type="Omit<FetchOptions, 'method' | 'baseURL' | 'body' | 'parseResponse' | 'responseType'>"}
+      Override the ofetch options.
+      The `query` and `headers` will be merged with the options provided by the uploader.
+    ::
   ::
 ::
 
 ### Return
 
-Return a `MultipartUploader` function that can be used to upload a file in parts.
+Return a `MultipartUpload` function that can be used to upload a file in parts.
 
 ```ts
-export function upload(file: File) {
-  const { completed, progress, cancel } = useMultipartUpload(file)
-  return await completed
-}
+const { completed, progress, abort } = upload(file)
+const data = await completed
 ```
 
 
@@ -488,32 +485,9 @@ export interface BlobUploadedPart {
 ### `MultipartUploader`
 
 ```ts
-export type MultipartUploader<
-  TCreateResponse,
-  TUploadResponse,
-  TCompleteResponse,
-> = (
-  file: File,
-  optionsOverride?: Partial<Omit<
-    MultipartUploaderOptions<
-      TCreateResponse,
-      TUploadResponse,
-      TCompleteResponse
-    >,
-    'create' | 'upload' | 'complete' | 'abort'
-  >>
-) => {
-  completed: Promise<TCompleteResponse | undefined>
+export type MultipartUploader = (file: File) => {
+  completed: Promise<SerializeObject<BlobObject> | undefined>
   progress: Readonly<Ref<number>>
-  cancel: () => Promise<void>
-}
-```
-
-### `MultipartUploadChunk`
-
-```ts
-export interface MultipartUploadChunk {
-  partNumber: number
-  chunkBody: Blob
+  abort: () => Promise<void>
 }
 ```
diff --git a/playground/composables/multipart.ts b/playground/composables/multipart.ts
deleted file mode 100644
index 9fb9bb92..00000000
--- a/playground/composables/multipart.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { SerializeObject } from 'nitropack'
-
-export const useMultipartUpload = createMultipartUploader({
-  create: (file) => $fetch<{pathname: string, uploadId: string}>(
-    `/api/blob/multipart/${file.name}`,
-    { method: 'POST' },
-  ),
-  upload: ({ partNumber, chunkBody }, { pathname, uploadId }) =>
-    $fetch<BlobUploadedPart>(
-      `/api/blob/multipart/${pathname}`,
-      {
-        method: 'PUT',
-        query: { uploadId, partNumber },
-        body: chunkBody,
-      },
-    ),
-  complete: (parts, { pathname, uploadId }) =>
-    $fetch<SerializeObject<BlobObject>>(
-      '/api/blob/multipart/complete',
-      {
-        method: 'POST',
-        query: { pathname, uploadId },
-        body: { parts },
-      },
-    ),
-
-  abort: ({ pathname, uploadId }) =>
-    $fetch<void>(`/api/blob/multipart/${pathname}`, {
-      method: 'DELETE',
-      query: { uploadId },
-    }),
-  concurrent: 2,
-})
diff --git a/playground/pages/blob.vue b/playground/pages/blob.vue
index 638293a3..1b194652 100644
--- a/playground/pages/blob.vue
+++ b/playground/pages/blob.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const loading = ref(false)
-const loadingProgress = ref<number | null>(null)
+const loadingProgress = ref<number | undefined>(undefined)
 const newFilesValue = ref<File[]>([])
 const uploadRef = ref()
 
@@ -45,8 +45,12 @@ async function uploadFiles(files: File[]) {
   })
 
   // upload big files
+  const uploadLarge = useMultipartUpload('/api/blob/multipart', {
+    concurrent: 2,
+  })
+
   for (const file of bigFiles) {
-    const { completed, progress, cancel } = useMultipartUpload(file)
+    const { completed, progress, abort } = uploadLarge(file)
 
     const uploadingToast = toast.add({
       title: `Uploading Large File...`,
@@ -58,16 +62,17 @@ async function uploadFiles(files: File[]) {
         variant: 'solid',
       },
       callback: () => {
-        if (progress.value !== 1) {
-          cancel()
+        if (progress.value !== 100) {
+          abort()
         }
       }
     })
-    watch(progress, v => loadingProgress.value = v)
+    const stopWatch = watch(progress, v => loadingProgress.value = v / 100)
 
     const complete = await completed
 
-    loadingProgress.value = null
+    stopWatch()
+    loadingProgress.value = undefined
     toast.remove(uploadingToast.id)
 
     if (complete) {
diff --git a/playground/server/api/blob/multipart/[...pathname].delete.ts b/playground/server/api/blob/multipart/[...pathname].delete.ts
deleted file mode 100644
index 301c3eeb..00000000
--- a/playground/server/api/blob/multipart/[...pathname].delete.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { z } from 'zod'
-
-export default eventHandler(async (event) => {
-  const { pathname } = await getValidatedRouterParams(event, z.object({
-    pathname: z.string().min(1)
-  }).parse)
-
-  const { uploadId } = await getValidatedQuery(event, z.object({
-    uploadId: z.string(),
-  }).parse)
-
-  const { resumeMultipartUpload } = hubBlob()
-  const mpu = resumeMultipartUpload(pathname, uploadId)
-
-  try {
-    await mpu.abort()
-  }
-  catch (e: any) {
-    throw createError({ status: 400, message: e.message })
-  }
-
-  return sendNoContent(event)
-})
diff --git a/playground/server/api/blob/multipart/[...pathname].post.ts b/playground/server/api/blob/multipart/[...pathname].post.ts
deleted file mode 100644
index 90200194..00000000
--- a/playground/server/api/blob/multipart/[...pathname].post.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { z } from 'zod'
-
-export default eventHandler(async (event) => {
-  const { pathname } = await getValidatedRouterParams(event, z.object({
-    pathname: z.string().min(1)
-  }).parse)
-
-  const options = await readValidatedBody(event, z.record(z.string(), z.any()).optional().parse)
-
-  const { createMultipartUpload } = hubBlob()
-  try {
-    const object = await createMultipartUpload(pathname, options)
-    return {
-      uploadId: object.uploadId,
-      pathname: object.pathname,
-    }
-  } catch (e: any) {
-    throw createError({
-      statusCode: 400,
-      message: e.message
-    })
-  }
-})
diff --git a/playground/server/api/blob/multipart/[...pathname].put.ts b/playground/server/api/blob/multipart/[...pathname].put.ts
deleted file mode 100644
index 6eda6d0e..00000000
--- a/playground/server/api/blob/multipart/[...pathname].put.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { z } from 'zod'
-
-export default eventHandler(async (event) => {
-  const { pathname } = await getValidatedRouterParams(event, z.object({
-    pathname: z.string().min(1)
-  }).parse)
-
-  const { uploadId, partNumber } = await getValidatedQuery(event, z.object({
-    uploadId: z.string(),
-    partNumber: z.coerce.number(),
-  }).parse)
-
-  const contentLength = Number(getHeader(event, 'content-length') || '0')
-
-  const stream = getRequestWebStream(event)!
-  const body = await streamToArrayBuffer(stream, contentLength)
-
-
-  const { resumeMultipartUpload } = hubBlob()
-  const mpu = resumeMultipartUpload(pathname, uploadId)
-
-  try {
-    return await mpu.uploadPart(partNumber, body)
-  } catch (e: any) {
-    throw createError({ status: 400, message: e.message })
-  }
-})
diff --git a/playground/server/api/blob/multipart/[action]/[...pathname].ts b/playground/server/api/blob/multipart/[action]/[...pathname].ts
new file mode 100644
index 00000000..9c1b0ae7
--- /dev/null
+++ b/playground/server/api/blob/multipart/[action]/[...pathname].ts
@@ -0,0 +1,3 @@
+export default eventHandler(async (event) => {
+  await hubBlob().handleMultipartUpload(event)
+})
diff --git a/playground/server/api/blob/multipart/complete.post.ts b/playground/server/api/blob/multipart/complete.post.ts
deleted file mode 100644
index 8f5fcb1f..00000000
--- a/playground/server/api/blob/multipart/complete.post.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { z } from 'zod'
-
-export default eventHandler(async (event) => {
-  const { pathname, uploadId } = await getValidatedQuery(event, z.object({
-    pathname: z.string().min(1),
-    uploadId: z.string().min(1),
-  }).parse)
-
-  const { parts } = await readValidatedBody(event,z.object({
-    parts: z.array(z.object({
-      partNumber: z.number(),
-      etag: z.string(),
-    }))
-  }).parse)
-
-  const { resumeMultipartUpload } = hubBlob()
-  const mpu = resumeMultipartUpload(pathname, uploadId)
-  try {
-    const object = await mpu.complete(parts)
-    return object
-  } catch (e: any) {
-    throw createError({
-      statusCode: 400,
-      message: e.message
-    })
-  }
-})
diff --git a/playground/server/utils/stream.ts b/playground/server/utils/stream.ts
deleted file mode 100644
index d1273a5b..00000000
--- a/playground/server/utils/stream.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export async function streamToArrayBuffer(stream: ReadableStream, streamSize: number) {
-  const result = new Uint8Array(streamSize)
-  let bytesRead = 0
-  const reader = stream.getReader()
-  // eslint-disable-next-line no-constant-condition
-  while (true) {
-    const { done, value } = await reader.read()
-    if (done) {
-      break
-    }
-    result.set(value, bytesRead)
-    bytesRead += value.length
-  }
-  return result
-}
diff --git a/src/runtime/composables/multipart.ts b/src/runtime/composables/multipart.ts
index 311f475a..69fe698a 100644
--- a/src/runtime/composables/multipart.ts
+++ b/src/runtime/composables/multipart.ts
@@ -2,45 +2,79 @@ import defu from 'defu'
 import { randomUUID } from 'uncrypto'
 import { readonly, type Ref } from 'vue'
 import { useState } from '#imports'
+import type { FetchOptions } from 'ofetch'
+import type { SerializeObject } from 'nitropack'
 
 /**
  * Create a multipart uploader.
  */
-export function createMultipartUploader<
-  TCreateResponse,
-  TUploadResponse,
-  TCompleteResponse,
-> (
-  options: MultipartUploaderOptions<
-    TCreateResponse,
-    TUploadResponse,
-    TCompleteResponse
-  >
-): MultipartUploader<TCreateResponse, TUploadResponse, TCompleteResponse> {
-  const opts = defu(options, {
+export function useMultipartUpload(
+  baseURL: string,
+  options?: UseMultipartUploadOptions
+): MultipartUploader {
+  const {
+    partSize,
+    concurrent,
+    maxRetry,
+    fetchOptions,
+  }= defu(options, {
     partSize: 10 * 1024 * 1024, // 10MB
-    concurrent: 1, // 1 concurrent uploads
-    maxRetry: 3, // max retry attempts for the whole upload
+    concurrent: 1, // no concurrent upload by default
+    maxRetry: 3,
+  })
+  const ofetch = $fetch.create({ baseURL, ...fetchOptions })
+  const queryOptions = options?.fetchOptions?.query || {}
+
+  const create = (file: File) => ofetch<{
+    pathname: string,
+    uploadId: string
+  }>(`/create/${file.name}`, {
+    method: 'POST'
+  })
+
+  const upload = (
+    { partNumber, chunkBody }: MultipartUploadChunk,
+    { pathname, uploadId }: Awaited<ReturnType<typeof create>>,
+  ) => ofetch<BlobUploadedPart>(`/upload/${pathname}`, {
+    method: 'PUT',
+    query: {
+      ...queryOptions,
+      uploadId,
+      partNumber
+    },
+    body: chunkBody,
   })
 
-  // useMultipartUpload
-  return (file, optionsOverride = {}) => {
-    const {
-      create,
-      upload,
-      complete,
-      abort,
-      partSize,
-      concurrent,
-      maxRetry,
-      verify,
-    } = defu(optionsOverride, opts)
+  const complete = (
+    parts: Awaited<ReturnType<typeof upload>>[],
+    { pathname, uploadId }: Awaited<ReturnType<typeof create>>,
+  ) => ofetch<SerializeObject<BlobObject>>(`/complete/${pathname}`,
+    {
+      method: 'POST',
+      query: {
+        ...queryOptions,
+        uploadId
+      },
+      body: { parts },
+    },
+  )
+
+  const abort = (
+    { pathname, uploadId }: Awaited<ReturnType<typeof create>>,
+  ) => ofetch<void>(`/abort/${pathname}`, {
+    method: 'DELETE',
+    query: {
+      ...queryOptions,
+      uploadId
+    },
+  })
 
+  return (file) => {
     const data = create(file)
     const chunks = Math.ceil(file.size / partSize)
 
     const queue = Array.from({ length: chunks }, (_, i) => i + 1)
-    const parts: TUploadResponse[] = []
+    const parts: Awaited<ReturnType<typeof upload>>[] = []
     const progress = useState(randomUUID(), () => 0)
     const errors: Error[] = []
     let canceled = false
@@ -52,7 +86,7 @@ export function createMultipartUploader<
       canceled = true
       queue.splice(0, queue.length)
       if (abort) {
-        await abort(await data, file)
+        await abort(await data)
       }
     }
 
@@ -66,13 +100,9 @@ export function createMultipartUploader<
     const process = async (partNumber: number) => {
       const prepared = prepare(partNumber)
       try {
-        const part = await upload(prepared, await data, file)
-
-        if (verify && !await verify(part, prepared)) {
-          throw new Error('Verification failed')
-        }
+        const part = await upload(prepared, await data)
 
-        progress.value = parts.length / chunks
+        progress.value = parts.length / chunks * 100
         parts.push(part)
       } catch (e) {
         errors.push(e as Error)
@@ -106,59 +136,23 @@ export function createMultipartUploader<
         return
       }
 
-      return complete(parts, await data, file)
+      return complete(parts, await data)
     }
 
     return {
       completed: start(),
       progress: readonly(progress),
-      cancel,
+      abort: cancel,
     }
   }
 }
 
-export interface MultipartUploadChunk {
+interface MultipartUploadChunk {
   partNumber: number
   chunkBody: Blob
 }
 
-export interface MultipartUploaderOptions<
-  TCreateResponse,
-  TUploadResponse,
-  TCompleteResponse,
-> {
-  /**
-   * Provide a function to create the initial data for the upload.
-   */
-  create: (file: File) => Promise<TCreateResponse> | TCreateResponse
-  /**
-   * Provide a function to upload a chunk of the file.
-   */
-  upload: (
-    chunk: MultipartUploadChunk,
-    data: TCreateResponse,
-    file: File,
-  ) => Promise<TUploadResponse> | TUploadResponse
-  /**
-   * Provide a function to complete the upload.
-   */
-  complete: (
-    parts: TUploadResponse[],
-    data: TCreateResponse,
-    file: File,
-  ) => Promise<TCompleteResponse> | TCompleteResponse
-  /**
-   * Provide a function to abort the upload.
-   */
-  abort?: (data: TCreateResponse, file: File) => Promise<void> | void
-  /**
-   * Provide a function to verify the upload response.
-   */
-  verify?: (
-    response: TUploadResponse,
-    chunk: MultipartUploadChunk,
-  ) => Promise<boolean> | boolean
-
+export interface UseMultipartUploadOptions {
   /**
    * The size of each part of the file to be uploaded.
    * @default 10 * 1024 * 1024
@@ -174,39 +168,24 @@ export interface MultipartUploaderOptions<
    * @default 3
    */
   maxRetry?: number
-}
-
-export type MultipartUploader<
-  TCreateResponse,
-  TUploadResponse,
-  TCompleteResponse,
-> = (
-  /**
-   * The file to upload.
-   */
-  file: File,
   /**
-   * Options to override the default options.
+   * Override the ofetch options.
+   * The query and headers will be merged with the options provided by the uploader.
    */
-  optionsOverride?: Partial<Omit<
-    MultipartUploaderOptions<
-      TCreateResponse,
-      TUploadResponse,
-      TCompleteResponse
-    >,
-    'create' | 'upload' | 'complete' | 'abort'
-  >>
-) => {
+  fetchOptions?: Omit<FetchOptions, 'method' | 'baseURL' | 'body' | 'parseResponse' | 'responseType'>,
+}
+
+export type MultipartUploader = (file: File) => {
   /**
    * The promise that resolves to the complete response or undefined if the upload is canceled or failed.
    */
-  completed: Promise<TCompleteResponse | undefined>
+  completed: Promise<SerializeObject<BlobObject> | undefined>
   /**
-   * The progress of the upload as a number between 0 and 1.
+   * The progress of the upload as a number between 0 and 100.
    */
   progress: Readonly<Ref<number>>
   /**
-   * Cancel the upload.
+   * Abort the upload.
    */
-  cancel: () => Promise<void>
+  abort: () => Promise<void>
 }
diff --git a/src/runtime/server/utils/blob.ts b/src/runtime/server/utils/blob.ts
index bcb4cc3d..edc2f33c 100644
--- a/src/runtime/server/utils/blob.ts
+++ b/src/runtime/server/utils/blob.ts
@@ -1,6 +1,7 @@
 import type { extensions } from '@uploadthing/mime-types'
 import slugify from '@sindresorhus/slugify'
 import type { R2Bucket, ReadableStream, R2MultipartUpload } from '@cloudflare/workers-types/experimental'
+import { z } from 'zod'
 import { ofetch } from 'ofetch'
 import mime from 'mime'
 import type { H3Event } from 'h3'
@@ -11,6 +12,7 @@ import { parse } from 'pathe'
 import { joinURL } from 'ufo'
 import { useRuntimeConfig } from '#imports'
 import { requireNuxtHubFeature } from './features'
+import { streamToArrayBuffer } from '../internal/utils/stream'
 
 export interface BlobObject {
   /**
@@ -113,6 +115,23 @@ export interface BlobMultipartOptions {
   [key: string]: any
 }
 
+export type HandleMPUResponse =
+  | {
+    action: 'create'
+    data: Pick<BlobMultipartUpload, 'pathname' | 'uploadId'>
+  }
+  | {
+    action: 'upload',
+    data: BlobUploadedPart
+  }
+  | {
+    action: 'complete',
+    data: BlobObject
+  }
+  | {
+    action: 'abort'
+  }
+
 const _r2_buckets: Record<string, R2Bucket> = {}
 
 
@@ -181,6 +200,11 @@ interface HubBlob {
    * Get the specified multipart upload.
    */
   resumeMultipartUpload(pathname: string, uploadId: string): BlobMultipartUpload
+  /**
+   * Handle the multipart upload request.
+   * Make sure your route includes `[action]` and `[...pathname]` params.
+   */
+  handleMultipartUpload(event: H3Event): Promise<HandleMPUResponse>
 }
 
 /**
@@ -306,7 +330,8 @@ export function hubBlob(): HubBlob {
   }
   return {
     ...blob,
-    delete: blob.del
+    delete: blob.del,
+    handleMultipartUpload: createMultipartUploadHandler(blob)
   }
 }
 
@@ -323,7 +348,7 @@ export function hubBlob(): HubBlob {
  *
  * @see https://hub.nuxt.com/docs/storage/blob
  */
-export function proxyHubBlob(projectUrl: string, secretKey?: string) {
+export function proxyHubBlob(projectUrl: string, secretKey?: string): HubBlob {
   requireNuxtHubFeature('blob')
 
   const blobAPI = ofetch.create({
@@ -423,7 +448,151 @@ export function proxyHubBlob(projectUrl: string, secretKey?: string) {
 
   return {
     ...blob,
-    delete: blob.del
+    delete: blob.del,
+    handleMultipartUpload: createMultipartUploadHandler(blob)
+  }
+}
+
+function createMultipartUploadHandler(
+  hub: Pick<HubBlob, 'createMultipartUpload' | 'resumeMultipartUpload'
+>): HubBlob['handleMultipartUpload'] {
+  const { createMultipartUpload, resumeMultipartUpload } = hub
+
+  const createHandler = async (event: H3Event) => {
+    const { pathname } = await getValidatedRouterParams(event, z.object({
+      pathname: z.string().min(1),
+    }).parse)
+
+    const options = await readValidatedBody(event, z.record(z.string(), z.any()).optional().parse)
+
+    try {
+      const object = await createMultipartUpload(pathname, options)
+      return {
+        uploadId: object.uploadId,
+        pathname: object.pathname,
+      }
+    } catch (e: any) {
+      throw createError({
+        statusCode: 400,
+        message: e.message
+      })
+    }
+  }
+
+  const uploadHandler = async (event: H3Event) => {
+    const { pathname } = await getValidatedRouterParams(event, z.object({
+      pathname: z.string().min(1),
+    }).parse)
+
+    const { uploadId, partNumber } = await getValidatedQuery(event, z.object({
+      uploadId: z.string(),
+      partNumber: z.coerce.number(),
+    }).parse)
+
+    const contentLength = Number(getHeader(event, 'content-length') || '0')
+
+    const stream = getRequestWebStream(event)!
+    const body = await streamToArrayBuffer(stream, contentLength)
+
+    const mpu = resumeMultipartUpload(pathname, uploadId)
+
+    try {
+      return await mpu.uploadPart(partNumber, body)
+    } catch (e: any) {
+      throw createError({ status: 400, message: e.message })
+    }
+  }
+
+  const completeHandler = async (event: H3Event) => {
+    const { pathname } = await getValidatedRouterParams(event, z.object({
+      pathname: z.string().min(1),
+    }).parse)
+
+    const { uploadId } = await getValidatedQuery(event, z.object({
+      uploadId: z.string().min(1),
+    }).parse)
+
+    const { parts } = await readValidatedBody(event,z.object({
+      parts: z.array(z.object({
+        partNumber: z.number(),
+        etag: z.string(),
+      }))
+    }).parse)
+
+    const mpu = resumeMultipartUpload(pathname, uploadId)
+    try {
+      const object = await mpu.complete(parts)
+      return object
+    } catch (e: any) {
+      throw createError({ status: 400, message: e.message })
+    }
+  }
+
+  const abortHandler = async (event: H3Event) => {
+    const { pathname } = await getValidatedRouterParams(event, z.object({
+      pathname: z.string().min(1),
+    }).parse)
+
+    const { uploadId } = await getValidatedQuery(event, z.object({
+      uploadId: z.string().min(1),
+    }).parse)
+
+    const mpu = resumeMultipartUpload(pathname, uploadId)
+
+    try {
+      await mpu.abort()
+    }
+    catch (e: any) {
+      throw createError({ status: 400, message: e.message })
+    }
+  }
+
+  const handler = async (event: H3Event) => {
+    const method = event.method
+    const { action } = await getValidatedRouterParams(event, z.object({
+      action: z.enum(['create', 'upload', 'complete', 'abort']),
+    }).parse)
+
+    if (action === 'create' && method === 'POST') {
+      return {
+        action,
+        data: await createHandler(event),
+      }
+    }
+
+    if (action === 'upload' && method === 'PUT') {
+      return {
+        action,
+        data: await uploadHandler(event),
+      }
+    }
+
+    if (action === 'complete' && method === 'POST') {
+      return {
+        action,
+        data: await completeHandler(event),
+      }
+    }
+
+    if (action === 'abort' && method === 'DELETE') {
+      return {
+        action,
+        data: await abortHandler(event),
+      }
+    }
+
+    throw createError({ status: 405 })
+  }
+
+  return async (event: H3Event) => {
+    const result = await handler(event)
+
+    if (result.data) {
+      event.respondWith(Response.json(result.data))
+    } else {
+      sendNoContent(event)
+    }
+    return result
   }
 }
 

From 08a464aa1c9f34a07e55b797bdada050afae5657 Mon Sep 17 00:00:00 2001
From: Teages <Teages@teages.xyz>
Date: Fri, 26 Apr 2024 02:39:01 +0800
Subject: [PATCH 11/15] chore: apply lint fixes

---
 playground/pages/blob.vue        | 2 +-
 src/runtime/server/utils/blob.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/playground/pages/blob.vue b/playground/pages/blob.vue
index 1b194652..8d847260 100644
--- a/playground/pages/blob.vue
+++ b/playground/pages/blob.vue
@@ -53,7 +53,7 @@ async function uploadFiles(files: File[]) {
     const { completed, progress, abort } = uploadLarge(file)
 
     const uploadingToast = toast.add({
-      title: `Uploading Large File...`,
+      title: `Uploading ${file.name}...`,
       description: file.name,
       color: 'sky',
       timeout: 0,
diff --git a/src/runtime/server/utils/blob.ts b/src/runtime/server/utils/blob.ts
index edc2f33c..f2cdac20 100644
--- a/src/runtime/server/utils/blob.ts
+++ b/src/runtime/server/utils/blob.ts
@@ -454,8 +454,8 @@ export function proxyHubBlob(projectUrl: string, secretKey?: string): HubBlob {
 }
 
 function createMultipartUploadHandler(
-  hub: Pick<HubBlob, 'createMultipartUpload' | 'resumeMultipartUpload'
->): HubBlob['handleMultipartUpload'] {
+  hub: Pick<HubBlob, 'createMultipartUpload' | 'resumeMultipartUpload'>
+): HubBlob['handleMultipartUpload'] {
   const { createMultipartUpload, resumeMultipartUpload } = hub
 
   const createHandler = async (event: H3Event) => {

From aa01e4e40c7fa6977157707637560ef45d1852da Mon Sep 17 00:00:00 2001
From: Teages <Teages@teages.xyz>
Date: Sat, 27 Apr 2024 00:49:50 +0800
Subject: [PATCH 12/15] chore: apply lint fix

---
 playground/pages/blob.vue                     | 12 ++--
 src/runtime/composables/multipart.ts          | 44 ++++++------
 .../blob/multipart/[...pathname].delete.ts    |  6 +-
 .../_hub/blob/multipart/[...pathname].post.ts |  2 +-
 .../_hub/blob/multipart/[...pathname].put.ts  |  3 +-
 .../api/_hub/blob/multipart/complete.post.ts  |  4 +-
 src/runtime/server/internal/utils/stream.ts   |  2 +-
 src/runtime/server/utils/blob.ts              | 69 +++++++++----------
 8 files changed, 70 insertions(+), 72 deletions(-)

diff --git a/playground/pages/blob.vue b/playground/pages/blob.vue
index 5bb046e4..cb3adbfb 100644
--- a/playground/pages/blob.vue
+++ b/playground/pages/blob.vue
@@ -32,12 +32,12 @@ async function addFile() {
 async function uploadFiles(files: File[]) {
   const bigFileLimit = 10 * 1024 * 1024 // 10MB
 
-  const bigFiles = files.filter((file) => file.size > bigFileLimit)
-  const smallFiles = files.filter((file) => file.size <= bigFileLimit)
+  const bigFiles = files.filter(file => file.size > bigFileLimit)
+  const smallFiles = files.filter(file => file.size <= bigFileLimit)
 
   // upload small files
   const formData = new FormData()
-  smallFiles.forEach((file) => formData.append('files', file))
+  smallFiles.forEach(file => formData.append('files', file))
 
   const uploadedFiles = await $fetch('/api/blob', {
     method: 'PUT',
@@ -46,7 +46,7 @@ async function uploadFiles(files: File[]) {
 
   // upload big files
   const uploadLarge = useMultipartUpload('/api/blob/multipart', {
-    concurrent: 2,
+    concurrent: 2
   })
 
   for (const file of bigFiles) {
@@ -59,7 +59,7 @@ async function uploadFiles(files: File[]) {
       timeout: 0,
       closeButton: {
         color: 'red',
-        variant: 'solid',
+        variant: 'solid'
       },
       callback: () => {
         if (progress.value !== 100) {
@@ -88,7 +88,7 @@ async function uploadFiles(files: File[]) {
   return uploadedFiles
 }
 
-function onFileSelect (e: any) {
+function onFileSelect(e: any) {
   const target = e.target
 
   // clone FileList so the reference does not clear due to following target clear
diff --git a/src/runtime/composables/multipart.ts b/src/runtime/composables/multipart.ts
index 69fe698a..5ba9f898 100644
--- a/src/runtime/composables/multipart.ts
+++ b/src/runtime/composables/multipart.ts
@@ -1,9 +1,9 @@
 import defu from 'defu'
 import { randomUUID } from 'uncrypto'
 import { readonly, type Ref } from 'vue'
-import { useState } from '#imports'
 import type { FetchOptions } from 'ofetch'
 import type { SerializeObject } from 'nitropack'
+import { useState } from '#imports'
 
 /**
  * Create a multipart uploader.
@@ -16,17 +16,17 @@ export function useMultipartUpload(
     partSize,
     concurrent,
     maxRetry,
-    fetchOptions,
-  }= defu(options, {
+    fetchOptions
+  } = defu(options, {
     partSize: 10 * 1024 * 1024, // 10MB
     concurrent: 1, // no concurrent upload by default
-    maxRetry: 3,
+    maxRetry: 3
   })
   const ofetch = $fetch.create({ baseURL, ...fetchOptions })
   const queryOptions = options?.fetchOptions?.query || {}
 
   const create = (file: File) => ofetch<{
-    pathname: string,
+    pathname: string
     uploadId: string
   }>(`/create/${file.name}`, {
     method: 'POST'
@@ -34,7 +34,7 @@ export function useMultipartUpload(
 
   const upload = (
     { partNumber, chunkBody }: MultipartUploadChunk,
-    { pathname, uploadId }: Awaited<ReturnType<typeof create>>,
+    { pathname, uploadId }: Awaited<ReturnType<typeof create>>
   ) => ofetch<BlobUploadedPart>(`/upload/${pathname}`, {
     method: 'PUT',
     query: {
@@ -42,12 +42,12 @@ export function useMultipartUpload(
       uploadId,
       partNumber
     },
-    body: chunkBody,
+    body: chunkBody
   })
 
   const complete = (
     parts: Awaited<ReturnType<typeof upload>>[],
-    { pathname, uploadId }: Awaited<ReturnType<typeof create>>,
+    { pathname, uploadId }: Awaited<ReturnType<typeof create>>
   ) => ofetch<SerializeObject<BlobObject>>(`/complete/${pathname}`,
     {
       method: 'POST',
@@ -55,19 +55,21 @@ export function useMultipartUpload(
         ...queryOptions,
         uploadId
       },
-      body: { parts },
-    },
+      body: { parts }
+    }
   )
 
-  const abort = (
-    { pathname, uploadId }: Awaited<ReturnType<typeof create>>,
-  ) => ofetch<void>(`/abort/${pathname}`, {
-    method: 'DELETE',
-    query: {
-      ...queryOptions,
-      uploadId
-    },
-  })
+  const abort = async (
+    { pathname, uploadId }: Awaited<ReturnType<typeof create>>
+  ) => {
+    await ofetch(`/abort/${pathname}`, {
+      method: 'DELETE',
+      query: {
+        ...queryOptions,
+        uploadId
+      }
+    })
+  }
 
   return (file) => {
     const data = create(file)
@@ -142,7 +144,7 @@ export function useMultipartUpload(
     return {
       completed: start(),
       progress: readonly(progress),
-      abort: cancel,
+      abort: cancel
     }
   }
 }
@@ -172,7 +174,7 @@ export interface UseMultipartUploadOptions {
    * Override the ofetch options.
    * The query and headers will be merged with the options provided by the uploader.
    */
-  fetchOptions?: Omit<FetchOptions, 'method' | 'baseURL' | 'body' | 'parseResponse' | 'responseType'>,
+  fetchOptions?: Omit<FetchOptions, 'method' | 'baseURL' | 'body' | 'parseResponse' | 'responseType'>
 }
 
 export type MultipartUploader = (file: File) => {
diff --git a/src/runtime/server/api/_hub/blob/multipart/[...pathname].delete.ts b/src/runtime/server/api/_hub/blob/multipart/[...pathname].delete.ts
index 66be3187..0bec451c 100644
--- a/src/runtime/server/api/_hub/blob/multipart/[...pathname].delete.ts
+++ b/src/runtime/server/api/_hub/blob/multipart/[...pathname].delete.ts
@@ -13,17 +13,15 @@ export default eventHandler(async (event) => {
   }).parse)
 
   const { uploadId } = await getValidatedQuery(event, z.object({
-    uploadId: z.string(),
+    uploadId: z.string()
   }).parse)
 
-
   const { resumeMultipartUpload } = hubBlob()
   const { abort } = resumeMultipartUpload(pathname, uploadId)
 
   try {
     await abort()
-  }
-  catch (e: any) {
+  } catch (e: any) {
     throw createError({
       statusCode: 500,
       message: `Storage error: ${e.message}`
diff --git a/src/runtime/server/api/_hub/blob/multipart/[...pathname].post.ts b/src/runtime/server/api/_hub/blob/multipart/[...pathname].post.ts
index a1b40d37..401ac226 100644
--- a/src/runtime/server/api/_hub/blob/multipart/[...pathname].post.ts
+++ b/src/runtime/server/api/_hub/blob/multipart/[...pathname].post.ts
@@ -19,7 +19,7 @@ export default eventHandler(async (event) => {
     const object = await createMultipartUpload(pathname, options)
     return {
       uploadId: object.uploadId,
-      pathname: object.pathname,
+      pathname: object.pathname
     }
   } catch (e: any) {
     throw createError({
diff --git a/src/runtime/server/api/_hub/blob/multipart/[...pathname].put.ts b/src/runtime/server/api/_hub/blob/multipart/[...pathname].put.ts
index 514699ac..6bc4e8ed 100644
--- a/src/runtime/server/api/_hub/blob/multipart/[...pathname].put.ts
+++ b/src/runtime/server/api/_hub/blob/multipart/[...pathname].put.ts
@@ -15,7 +15,7 @@ export default eventHandler(async (event) => {
 
   const { uploadId, partNumber } = await getValidatedQuery(event, z.object({
     uploadId: z.string(),
-    partNumber: z.coerce.number(),
+    partNumber: z.coerce.number()
   }).parse)
 
   const contentLength = Number(getHeader(event, 'content-length') || '0')
@@ -23,7 +23,6 @@ export default eventHandler(async (event) => {
   const stream = getRequestWebStream(event)!
   const body = await streamToArrayBuffer(stream, contentLength)
 
-
   const { resumeMultipartUpload } = hubBlob()
   const { uploadPart } = resumeMultipartUpload(pathname, uploadId)
 
diff --git a/src/runtime/server/api/_hub/blob/multipart/complete.post.ts b/src/runtime/server/api/_hub/blob/multipart/complete.post.ts
index bb715d7b..a73f99f3 100644
--- a/src/runtime/server/api/_hub/blob/multipart/complete.post.ts
+++ b/src/runtime/server/api/_hub/blob/multipart/complete.post.ts
@@ -10,13 +10,13 @@ export default eventHandler(async (event) => {
 
   const { pathname, uploadId } = await getValidatedQuery(event, z.object({
     pathname: z.string().min(1),
-    uploadId: z.string().min(1),
+    uploadId: z.string().min(1)
   }).parse)
 
   const { parts } = await readValidatedBody(event, z.object({
     parts: z.array(z.object({
       partNumber: z.number(),
-      etag: z.string(),
+      etag: z.string()
     }))
   }).parse)
 
diff --git a/src/runtime/server/internal/utils/stream.ts b/src/runtime/server/internal/utils/stream.ts
index d1273a5b..799077bf 100644
--- a/src/runtime/server/internal/utils/stream.ts
+++ b/src/runtime/server/internal/utils/stream.ts
@@ -2,7 +2,7 @@ export async function streamToArrayBuffer(stream: ReadableStream, streamSize: nu
   const result = new Uint8Array(streamSize)
   let bytesRead = 0
   const reader = stream.getReader()
-  // eslint-disable-next-line no-constant-condition
+
   while (true) {
     const { done, value } = await reader.read()
     if (done) {
diff --git a/src/runtime/server/utils/blob.ts b/src/runtime/server/utils/blob.ts
index ecacc14d..6a1e16f8 100644
--- a/src/runtime/server/utils/blob.ts
+++ b/src/runtime/server/utils/blob.ts
@@ -9,8 +9,8 @@ import { defu } from 'defu'
 import { randomUUID } from 'uncrypto'
 import { parse } from 'pathe'
 import { joinURL } from 'ufo'
-import { requireNuxtHubFeature } from './features'
 import { streamToArrayBuffer } from '../internal/utils/stream'
+import { requireNuxtHubFeature } from './features'
 import { useRuntimeConfig } from '#imports'
 
 export interface BlobObject {
@@ -36,11 +36,11 @@ export interface BlobUploadedPart {
   /**
    * The number of the part.
    */
-  partNumber: number;
+  partNumber: number
   /**
    * The etag of the part.
    */
-  etag: string;
+  etag: string
 }
 
 export interface BlobMultipartUpload {
@@ -103,16 +103,16 @@ export interface BlobMultipartOptions {
   /**
    * The content type of the blob.
    */
-  contentType?: string,
+  contentType?: string
   /**
    * The content length of the blob.
    */
-  contentLength?: string,
+  contentLength?: string
   /**
    * If a random suffix is added to the blob pathname.
    * @default false
    */
-  addRandomSuffix?: boolean,
+  addRandomSuffix?: boolean
   [key: string]: any
 }
 
@@ -122,11 +122,11 @@ export type HandleMPUResponse =
     data: Pick<BlobMultipartUpload, 'pathname' | 'uploadId'>
   }
   | {
-    action: 'upload',
+    action: 'upload'
     data: BlobUploadedPart
   }
   | {
-    action: 'complete',
+    action: 'complete'
     data: BlobObject
   }
   | {
@@ -409,7 +409,7 @@ export function proxyHubBlob(projectUrl: string, secretKey?: string): HubBlob {
     async createMultipartUpload(pathname: string, options: BlobMultipartOptions = {}) {
       return await blobAPI<BlobMultipartUpload>(`/multipart/${decodeURI(pathname)}`, {
         method: 'POST',
-        body: options,
+        body: options
       })
     },
     resumeMultipartUpload(pathname: string, uploadId: string): BlobMultipartUpload {
@@ -421,17 +421,17 @@ export function proxyHubBlob(projectUrl: string, secretKey?: string): HubBlob {
             method: 'PUT',
             query: {
               uploadId,
-              partNumber,
+              partNumber
             },
-            body,
+            body
           })
         },
         async abort(): Promise<void> {
-          return await blobAPI<void>(`/multipart/${decodeURI(pathname)}`, {
+          await blobAPI(`/multipart/${decodeURI(pathname)}`, {
             method: 'DELETE',
             query: {
-              uploadId,
-            },
+              uploadId
+            }
           })
         },
         async complete(parts: BlobUploadedPart[]): Promise<BlobObject> {
@@ -439,13 +439,13 @@ export function proxyHubBlob(projectUrl: string, secretKey?: string): HubBlob {
             method: 'POST',
             query: {
               pathname,
-              uploadId,
+              uploadId
             },
             body: {
-              parts,
-            },
+              parts
+            }
           })
-        },
+        }
       }
     }
   }
@@ -464,7 +464,7 @@ function createMultipartUploadHandler(
 
   const createHandler = async (event: H3Event) => {
     const { pathname } = await getValidatedRouterParams(event, z.object({
-      pathname: z.string().min(1),
+      pathname: z.string().min(1)
     }).parse)
 
     const options = await readValidatedBody(event, z.record(z.string(), z.any()).optional().parse)
@@ -473,7 +473,7 @@ function createMultipartUploadHandler(
       const object = await createMultipartUpload(pathname, options)
       return {
         uploadId: object.uploadId,
-        pathname: object.pathname,
+        pathname: object.pathname
       }
     } catch (e: any) {
       throw createError({
@@ -485,12 +485,12 @@ function createMultipartUploadHandler(
 
   const uploadHandler = async (event: H3Event) => {
     const { pathname } = await getValidatedRouterParams(event, z.object({
-      pathname: z.string().min(1),
+      pathname: z.string().min(1)
     }).parse)
 
     const { uploadId, partNumber } = await getValidatedQuery(event, z.object({
       uploadId: z.string(),
-      partNumber: z.coerce.number(),
+      partNumber: z.coerce.number()
     }).parse)
 
     const contentLength = Number(getHeader(event, 'content-length') || '0')
@@ -509,17 +509,17 @@ function createMultipartUploadHandler(
 
   const completeHandler = async (event: H3Event) => {
     const { pathname } = await getValidatedRouterParams(event, z.object({
-      pathname: z.string().min(1),
+      pathname: z.string().min(1)
     }).parse)
 
     const { uploadId } = await getValidatedQuery(event, z.object({
-      uploadId: z.string().min(1),
+      uploadId: z.string().min(1)
     }).parse)
 
-    const { parts } = await readValidatedBody(event,z.object({
+    const { parts } = await readValidatedBody(event, z.object({
       parts: z.array(z.object({
         partNumber: z.number(),
-        etag: z.string(),
+        etag: z.string()
       }))
     }).parse)
 
@@ -534,19 +534,18 @@ function createMultipartUploadHandler(
 
   const abortHandler = async (event: H3Event) => {
     const { pathname } = await getValidatedRouterParams(event, z.object({
-      pathname: z.string().min(1),
+      pathname: z.string().min(1)
     }).parse)
 
     const { uploadId } = await getValidatedQuery(event, z.object({
-      uploadId: z.string().min(1),
+      uploadId: z.string().min(1)
     }).parse)
 
     const mpu = resumeMultipartUpload(pathname, uploadId)
 
     try {
       await mpu.abort()
-    }
-    catch (e: any) {
+    } catch (e: any) {
       throw createError({ status: 400, message: e.message })
     }
   }
@@ -554,34 +553,34 @@ function createMultipartUploadHandler(
   const handler = async (event: H3Event) => {
     const method = event.method
     const { action } = await getValidatedRouterParams(event, z.object({
-      action: z.enum(['create', 'upload', 'complete', 'abort']),
+      action: z.enum(['create', 'upload', 'complete', 'abort'])
     }).parse)
 
     if (action === 'create' && method === 'POST') {
       return {
         action,
-        data: await createHandler(event),
+        data: await createHandler(event)
       }
     }
 
     if (action === 'upload' && method === 'PUT') {
       return {
         action,
-        data: await uploadHandler(event),
+        data: await uploadHandler(event)
       }
     }
 
     if (action === 'complete' && method === 'POST') {
       return {
         action,
-        data: await completeHandler(event),
+        data: await completeHandler(event)
       }
     }
 
     if (action === 'abort' && method === 'DELETE') {
       return {
         action,
-        data: await abortHandler(event),
+        data: await abortHandler(event)
       }
     }
 

From 88f8b2270821cd7a7c646fea3f54cc2d60ecd6a1 Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Fri, 31 May 2024 10:47:07 +0200
Subject: [PATCH 13/15] support prefix

---
 docs/content/docs/2.storage/3.blob.md |  3 +++
 src/runtime/composables/multipart.ts  | 11 +++++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/docs/content/docs/2.storage/3.blob.md b/docs/content/docs/2.storage/3.blob.md
index c5ba689d..e4a36a43 100644
--- a/docs/content/docs/2.storage/3.blob.md
+++ b/docs/content/docs/2.storage/3.blob.md
@@ -433,6 +433,9 @@ export const upload = useMultipartUpload('/api/files/multipart')
     ::field{name="maxRetry" type="number"}
       The maximum number of retry attempts for the whole upload. Defaults to `3`.
     ::
+    ::field{name="prefix" type="string"}
+      The prefix to use for the blob pathname.
+    ::
     ::field{name="fetchOptions" type="Omit<FetchOptions, 'method' | 'baseURL' | 'body' | 'parseResponse' | 'responseType'>"}
       Override the ofetch options.
       The `query` and `headers` will be merged with the options provided by the uploader.
diff --git a/src/runtime/composables/multipart.ts b/src/runtime/composables/multipart.ts
index 5ba9f898..4849c809 100644
--- a/src/runtime/composables/multipart.ts
+++ b/src/runtime/composables/multipart.ts
@@ -1,8 +1,10 @@
 import defu from 'defu'
 import { randomUUID } from 'uncrypto'
+import { joinURL } from 'ufo'
 import { readonly, type Ref } from 'vue'
 import type { FetchOptions } from 'ofetch'
 import type { SerializeObject } from 'nitropack'
+import type { BlobUploadedPart } from '../server/utils/blob'
 import { useState } from '#imports'
 
 /**
@@ -16,7 +18,8 @@ export function useMultipartUpload(
     partSize,
     concurrent,
     maxRetry,
-    fetchOptions
+    fetchOptions,
+    prefix
   } = defu(options, {
     partSize: 10 * 1024 * 1024, // 10MB
     concurrent: 1, // no concurrent upload by default
@@ -28,7 +31,7 @@ export function useMultipartUpload(
   const create = (file: File) => ofetch<{
     pathname: string
     uploadId: string
-  }>(`/create/${file.name}`, {
+  }>(prefix ? joinURL('/create', prefix, file.name) : joinURL('/create', file.name), {
     method: 'POST'
   })
 
@@ -170,6 +173,10 @@ export interface UseMultipartUploadOptions {
    * @default 3
    */
   maxRetry?: number
+  /**
+   * The prefix to use for the blob pathname.
+   */
+  prefix?: string
   /**
    * Override the ofetch options.
    * The query and headers will be merged with the options provided by the uploader.

From 69d9369e086e5375d7a4f3af9b709fa15a0a4d98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxt.com>
Date: Fri, 31 May 2024 17:25:03 +0200
Subject: [PATCH 14/15] forward props

---
 docs/content/docs/2.storage/3.blob.md         | 80 ++++++++++++++-----
 .../blob/multipart/[action]/[...pathname].ts  |  4 +-
 src/runtime/server/utils/blob.ts              | 14 ++--
 3 files changed, 70 insertions(+), 28 deletions(-)

diff --git a/docs/content/docs/2.storage/3.blob.md b/docs/content/docs/2.storage/3.blob.md
index e4a36a43..742745af 100644
--- a/docs/content/docs/2.storage/3.blob.md
+++ b/docs/content/docs/2.storage/3.blob.md
@@ -131,6 +131,32 @@ export default eventHandler(async (event) => {
 })
 ```
 
+See an example on the Vue side:
+
+```vue [pages/upload.vue]
+<script setup lang="ts">
+async function uploadImage (e: Event) {
+  const form = e.target as HTMLFormElement
+
+  await $fetch('/api/files', {
+    method: 'POST',
+    body: new FormData(form)
+  }).catch((err) => alert('Failed to upload image:\n'+ err.data?.message))
+
+  form.reset()
+}
+</script>
+
+<template>
+  <form @submit.prevent="uploadImage">
+    <label>Upload an image: <input type="file" name="image"></label>
+    <button type="submit">
+      Upload
+    </button>
+  </form>
+</template>
+```
+
 #### Params
 
 ::field-group
@@ -194,6 +220,36 @@ You can also use the `delete()` method as alias of `del()`.
 
 Returns nothing.
 
+### `handleMultipartUpload()`
+
+Handle the request to support multipart upload.
+
+```ts [server/api/files/multipart/[action\\]/[...pathname\\].ts]
+export default eventHandler(async (event) => {
+  return await hubBlob().handleMultipartUpload(event)
+})
+```
+
+::important
+Make sure your route includes `[action]` and `[...pathname]` params.
+::
+
+On the client side, you can use the `useMultipartUpload()` composable to upload a file in parts.
+
+```vue
+<script setup lang="ts">
+async function uploadFile(file: File) {
+  const upload = useMultipartUpload('/api/files/multipart')
+
+  const { progress, completed, abort } = upload(file)
+}
+</script>
+```
+
+::note{to="#usemultipartupload"}
+See [`useMultipartUpload()`](#usemultipartupload) on usage details.
+::
+
 ### `createMultipartUpload()`
 
 ::note
@@ -346,23 +402,6 @@ async function uploadLargeFile(file: File) {
 
 Returns a `BlobMultipartUpload`
 
-### `handleMultipartUpload()`
-
-Handle the multipart upload request.
-
-::note
-Make sure your route includes `[action]` and `[...pathname]` params.
-::
-
-```ts [server/api/files/multipart/[action\\]/[...pathname\\].ts]
-export default eventHandler(async (event) => {
-  await hubBlob().handleMultipartUpload(event)
-})
-```
-
-::note
-Use [`useMultipartUpload()`](#usemultipartupload) to upload in client.
-::
 
 #### Params
 
@@ -410,7 +449,11 @@ Throws an error if `file` doesn't meet the requirements.
 
 ## `useMultipartUpload()`
 
-Client composable that creates a multipart upload helper.
+::note
+This is a composable to be used in the Vue side of your application (not the `server/` directory).
+::
+
+Application composable that creates a multipart upload helper.
 
 ```ts [utils/multipart-upload.ts]
 export const upload = useMultipartUpload('/api/files/multipart')
@@ -511,7 +554,6 @@ interface BlobListResult {
 }
 ```
 
-
 ## Examples
 
 ### List blobs with pagination
diff --git a/playground/server/api/blob/multipart/[action]/[...pathname].ts b/playground/server/api/blob/multipart/[action]/[...pathname].ts
index 9c1b0ae7..94be14e6 100644
--- a/playground/server/api/blob/multipart/[action]/[...pathname].ts
+++ b/playground/server/api/blob/multipart/[action]/[...pathname].ts
@@ -1,3 +1,5 @@
 export default eventHandler(async (event) => {
-  await hubBlob().handleMultipartUpload(event)
+  return await hubBlob().handleMultipartUpload(event, {
+    addRandomSuffix: true
+  })
 })
diff --git a/src/runtime/server/utils/blob.ts b/src/runtime/server/utils/blob.ts
index 57c91807..23cfb2c5 100644
--- a/src/runtime/server/utils/blob.ts
+++ b/src/runtime/server/utils/blob.ts
@@ -231,7 +231,7 @@ interface HubBlob {
    * Handle the multipart upload request.
    * Make sure your route includes `[action]` and `[...pathname]` params.
    */
-  handleMultipartUpload(event: H3Event): Promise<HandleMPUResponse>
+  handleMultipartUpload(event: H3Event, options?: BlobMultipartOptions): Promise<HandleMPUResponse>
 }
 
 /**
@@ -488,13 +488,11 @@ function createMultipartUploadHandler(
 ): HubBlob['handleMultipartUpload'] {
   const { createMultipartUpload, resumeMultipartUpload } = hub
 
-  const createHandler = async (event: H3Event) => {
+  const createHandler = async (event: H3Event, options?: BlobMultipartOptions) => {
     const { pathname } = await getValidatedRouterParams(event, z.object({
       pathname: z.string().min(1)
     }).parse)
 
-    const options = await readValidatedBody(event, z.record(z.string(), z.any()).optional().parse)
-
     try {
       const object = await createMultipartUpload(pathname, options)
       return {
@@ -576,7 +574,7 @@ function createMultipartUploadHandler(
     }
   }
 
-  const handler = async (event: H3Event) => {
+  const handler = async (event: H3Event, options?: BlobMultipartOptions) => {
     const method = event.method
     const { action } = await getValidatedRouterParams(event, z.object({
       action: z.enum(['create', 'upload', 'complete', 'abort'])
@@ -585,7 +583,7 @@ function createMultipartUploadHandler(
     if (action === 'create' && method === 'POST') {
       return {
         action,
-        data: await createHandler(event)
+        data: await createHandler(event, options)
       }
     }
 
@@ -613,8 +611,8 @@ function createMultipartUploadHandler(
     throw createError({ status: 405 })
   }
 
-  return async (event: H3Event) => {
-    const result = await handler(event)
+  return async (event: H3Event, options?: BlobMultipartOptions) => {
+    const result = await handler(event, options)
 
     if (result.data) {
       event.respondWith(Response.json(result.data))

From 09d96e6fe305d6e8498090afd50480f47c6660b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxt.com>
Date: Fri, 31 May 2024 18:25:32 +0200
Subject: [PATCH 15/15] up

---
 src/runtime/compsables/useUpload.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/runtime/compsables/useUpload.ts b/src/runtime/compsables/useUpload.ts
index 456d15d2..ea541eef 100644
--- a/src/runtime/compsables/useUpload.ts
+++ b/src/runtime/compsables/useUpload.ts
@@ -12,7 +12,6 @@ interface UploadOptions extends FetchOptions {
    * @default true
    */
   multiple?: boolean
-
 }
 
 export function useUpload(apiBase: string, options: UploadOptions & { multiple: false }): (data: FileList | HTMLInputElement | File[] | File) => Promise<BlobObject>