Lo que vas a construir
Un sistema de subida de archivos donde los usuarios pueden arrastrar y soltar imagenes o documentos, ver una barra de progreso y obtener la URL del archivo subido. Usaras URLs pre-firmadas de AWS S3 para que los archivos vayan directamente al almacenamiento en la nube sin pasar por tu servidor, haciendolo mas rapido y economico. Al terminar, tendras un componente de upload reutilizable con validacion de tipo y tamano que puedes integrar en cualquier formulario.
Por qué pre-signed URLs
- El archivo va directo a S3 (no pasa por tu servidor)
- Más rápido y económico
- Tu servidor solo genera la URL
Paso 1: Pídele a una IA la implementación
Necesito subida de archivos a S3 con:
- URLs pre-firmadas
- API route que genere la URL
- Componente de upload con drag & drop
- Barra de progreso
- Validación de tipo y tamaño
- TypeScript
Dame el código completo.
API Route
import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3'
import { getSignedUrl } from '@aws-sdk/s3-request-presigner'
const s3 = new S3Client({ region: 'us-east-1' })
export async function POST(request: Request) {
const { filename, contentType } = await request.json()
const command = new PutObjectCommand({
Bucket: process.env.S3_BUCKET,
Key: `uploads/${Date.now()}-${filename}`,
ContentType: contentType
})
const url = await getSignedUrl(s3, command, { expiresIn: 3600 })
return Response.json({ url })
}
Cliente
async function uploadFile(file: File) {
// 1. Obtener URL pre-firmada
const { url } = await fetch('/api/upload', {
method: 'POST',
body: JSON.stringify({ filename: file.name, contentType: file.type })
}).then(r => r.json())
// 2. Subir directo a S3
await fetch(url, {
method: 'PUT',
body: file,
headers: { 'Content-Type': file.type }
})
}