Blob

NuxtHub Blob is a layer on top of Cloudflare R2, allowing to store large amounts of unstructured data (images, videos, etc.).

Getting Started

Enable the blob storage in your NuxtHub project by adding the blob property to the hub object in your nuxt.config.ts file.

defineNuxtConfig({
  hub: {
    blob: true
  }
})

hubBlob()

Server composable that returns a set of methods to manipulate the blob storage.

list()

Returns a paginated list of blobs.

export default eventHandler(async () => {
  return hubBlob().list()
})

Params

Return

Returns an array of BlobObject.

serve()

Returns a blob's data.

export default eventHandler(async (event) => {
  const { pathname } = getRouterParams(event)

  return hubBlob().serve(event, pathname)
})

Params

Return

Returns the blob's raw data and sets Content-Type and Content-Length headers.

<img :src="`/api/blob/${file.pathname}`">

head()

Returns a blob's metadata.

const blob = await hubBlob().head(pathname)

Params

Return

Returns a BlobObject.

put()

Uploads a blob to the storage.

export default eventHandler(async (event) => {
  const form = await readFormData(event)
  const file = form.get('file') as File

  if (!file || !file.size) {
    throw createError({ statusCode: 400, message: 'No file provided' })
  }

  ensureBlob(file, { maxSize: '1MB', types: ['image' ]})

  return hubBlob().put(`images/${file.name}`, file, { addRandomSuffix: false })
})

Params

Return

Returns a BlobObject.

del()

Delete a blob with its pathname.

export default eventHandler(async (event) => {
  const { pathname } = getRouterParams(event)

  await hubBlob().del(pathname)

  return sendNoContent(event)
})

You can also delete multiple blobs at once by providing an array of pathnames:

await hubBlob().del(['images/1.jpg', 'images/2.jpg'])

Params

Return

Returns nothing.

ensureBlob()

ensureBlob() is a handy util to validate a Blob by checking its size and type:

// Will throw an error if the file is not an image or is larger than 1MB
ensureBlob(file, { maxSize: '1MB', types: ['image' ]})

Params

Return

Returns nothing.

Throws an error if file doesn't meet the requirements.

Types

BlobObject

interface BlobObject {
  pathname: string
  contentType: string | undefined
  size: number
  uploadedAt: Date
}