File Upload Integration

Complete guide to file upload integration in your Founderflow Boilerplate. Learn how to handle file uploads, image processing, and cloud storage with various providers.

Overview

📁

File Upload System

The boilerplate includes a comprehensive file upload system with support for multiple storage providers, image optimization, file validation, and secure upload handling.

✓

Multiple Storage Providers

AWS S3, Cloudinary, Vercel Blob, and local storage

✓

Image Optimization

Automatic resizing, compression, and format conversion

✓

File Validation

Type checking, size limits, and security scanning

✓

Progress Tracking

Real-time upload progress and status updates

✓

CDN Integration

Fast global content delivery

✓

Security

Virus scanning, access control, and secure URLs

Storage Providers

AWS S3

Scalable cloud storage with high availability and durability.

Environment Variables

# AWS S3 Configuration

AWS_ACCESS_KEY_ID=your_access_key

AWS_SECRET_ACCESS_KEY=your_secret_key

AWS_S3_BUCKET=your-bucket-name

AWS_REGION=us-east-1

Cloudinary

Image and video management with automatic optimization.

Environment Variables

# Cloudinary Configuration

CLOUDINARY_CLOUD_NAME=your_cloud_name

CLOUDINARY_API_KEY=your_api_key

CLOUDINARY_API_SECRET=your_api_secret

Vercel Blob

Simple file storage optimized for Vercel deployments.

Environment Variables

# Vercel Blob Configuration

BLOB_READ_WRITE_TOKEN=vercel_blob_rw_...

Local Storage

File storage on the server filesystem for development.

Configuration

# Local Storage

UPLOAD_DIR=./uploads

MAX_FILE_SIZE=10485760

Upload Implementation

Upload API Route

Handle file uploads with validation and processing:

app/api/upload/route.ts

import { NextRequest } from 'next/server';

import { uploadToS3 } from '@/lib/upload';

export async function POST(request: NextRequest) {

try {

const formData = await request.formData();

const file = formData.get('file') as File;

// Validate file

if (!file) {

return Response.json({ error: 'No file provided' }, { status: 400 });

}

const maxSize = 10 * 1024 * 1024; // 10MB

if (file.size > maxSize) {

return Response.json({ error: 'File too large' }, { status: 400 });

}

// Upload file

const uploadResult = await uploadToS3(file);

return Response.json({ url: uploadResult.url, key: uploadResult.key });

} catch (error) {

return Response.json({ error: error.message }, { status: 500 });

}

Upload Component

Create a file upload component with drag-and-drop support:

components/upload/FileUpload.tsx

'use client';

import { useState, useCallback } from 'react';

export default function FileUpload() {

const [uploading, setUploading] = useState(false);

const [uploadedFile, setUploadedFile] = useState<string | null>(null);

const handleUpload = useCallback(async (file: File) => {

setUploading(true);

const formData = new FormData();

formData.append('file', file);

const response = await fetch('/api/upload', {

method: 'POST',

body: formData

});

const result = await response.json();

setUploadedFile(result.url);

setUploading(false);

}, []);

return (

<input

type="file"

onChange={(e) => e.target.files?.[0] && handleUpload(e.target.files[0])}

disabled={uploading}

{uploading && <p>Uploading...</p>}

{uploadedFile && <p>Uploaded: {uploadedFile}</p>}

</div>

);

}

Next Steps

Now that you understand file upload integration, explore these related areas:

Sanity Integration

Learn how to integrate file uploads with your CMS.

Customization Guide

Customize your file upload workflows and UI.