Skip to main content

File and Image upload

Manifest comes with a built-in local storage for uploaded assets. File upload lets you update pretty much anything whereas image upload comes with a simple resize system.

A public/storage folder is automatically created when needed. Uploaded files and images will be renamed with a unique name and stored in a specific folder based on entity and property name, ending by a folder with the current month name to prevent having to many files in a single folder.

Example: public/storage/project/contract/Nov24/8dab3936m1p54a66-contract.pdf

warning

Uploading a file or an image is an independent action. If you want to set this file as an item's property, you still need to create or update the item after, adding the new uploaded file path as the property value.

Upload a file​

A file should be related to an property with the file property type.


// Create a Blob, adapt this step to your use case.
const file = new Blob(['Hello, this is a test file!'], {
type: 'text/plain',
})

// Upload a file that will be used as a contract for an invoice.
const file = await manifest.from('invoices').upload('contract', file)

console.log(file)
// Output: {"path":"invoices/contract/Oct2024/8dabo9qm1q3swvu-my-contract.pdf"}


// Then you can store the path in the database.
const invoice = await manifest.from('invoices').create({
name: 'Invoice ACME',
contract: file.path
})

Upload an image​

An image should be related to a property with the image property type. Manifest accepts PNG and JPG images only.

Each image uploaded will be optimized and resized into several sizes based on the property parameters. By default it generates a -thumbnail- of 80x80 and a medium of 160x160

// Create a Blob from an image, adapt this step to your use case.
const base64Image =
'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/wcAAwAB/eb7jLwAAAAASUVORK5CYII='
const imageBlob: Blob = base64ToBlob(base64Image, 'image/png')

// Upload the image.
const image = await manifest.from('cats').uploadImage('avatar', imageBlob)

console.log(image)
// Output: {
// "medium": "cats/avatar/Oct2024/8dabo9qm1q4n1nk-medium.jpg",
// "thumbnail": "cats/avatar/Oct2024/8dabo9qm1q4n1nk-thumbnail.jpg"
// }

// Then you can store the path in the database.
const cat = await manifest.from('invoices').create({
name: 'Felix',
image: image
})