Blob
Store and upload images, videos and other unstructured data in your Nuxt application.
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.
export default 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
The list options.
The maximum number of blobs to return per request. Defaults to 1000.
Filters the results to only those that begin with the specified prefix.
The cursor to continue from a previous list operation.
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
Handler's event, needed to set headers.
The name of the blob to serve.
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
The name of the blob to serve.
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
The name of the blob to serve.
The blob's data.
The put options. Any other provided field will be stored in the blob's metadata.
The content type of the blob. If not given, it will be inferred from the Blob or the file extension.
The content length of the blob.
If true, a random suffix will be added to the blob's name. Defaults to false.
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'])
delete() method as alias of del().Params
The name of the blob to serve.
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
The file to validate.
Note that at least maxSize or types should be provided.
The maximum size of the file, should be:
(1 | 2 | 4 | 8 | 16 | 32 | 64 | 128 | 256 | 512 | 1024) + (B | KB | MB | GB)
e.g. '512KB', '1MB', '2GB', etc.
Allowed types of the file, e.g. ['image/jpeg'].
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
}