Storage
How to store files in your application.
next-forge has a storage package that provides a simple wrapper around Vercel Blob for file storage.
Usage
Server uploads
To use the storage package using Server Actions, follow the instructions on Vercel's server action documentation.
import { put } from '@repo/storage';
import { revalidatePath } from 'next/cache';
export async function Form() {
async function uploadImage(formData: FormData) {
'use server';
const imageFile = formData.get('image') as File;
const blob = await put(imageFile.name, imageFile, {
access: 'public',
});
revalidatePath('/');
return blob;
}
return (
<form action={uploadImage}>
<label htmlFor="image">Image</label>
<input type="file" id="image" name="image" required />
<button>Upload</button>
</form>
);
}If you need to upload files larger than 4.5 MB, consider using client uploads.
Client uploads
For client side usage, check out the Vercel's client upload documentation.
'use client';
import { type PutBlobResult } from '@repo/storage';
import { upload } from '@repo/storage/client';
import { useState, useRef } from 'react';
export default function AvatarUploadPage() {
const inputFileRef = useRef<HTMLInputElement>(null);
const [blob, setBlob] = useState<PutBlobResult | null>(null);
return (
<>
<h1>Upload Your Avatar</h1>
<form
onSubmit={async (event) => {
event.preventDefault();
if (!inputFileRef.current?.files) {
throw new Error('No file selected');
}
const file = inputFileRef.current.files[0];
const newBlob = await upload(file.name, file, {
access: 'public',
handleUploadUrl: '/api/avatar/upload',
});
setBlob(newBlob);
}}
>
<input name="file" ref={inputFileRef} type="file" required />
<button type="submit">Upload</button>
</form>
{blob && (
<div>
Blob url: <a href={blob.url}>{blob.url}</a>
</div>
)}
</>
);
}