En este tutorial aprenderás a subir archivos en un proyecto de Nextjs 13, la aplicación que crearemos es muy sencilla, basicamente crearemos un formulario con React, veremos un preview de la imagen y la subiremos usando una REST API creada en Nextjs todo con la carpeta app (App Route), y usando las ultimas características del Framework.
Creación del Proyecto
Empecemos creando un proyecto de Nextjs:
npx create-next-app@latest
Usa las siguientes configuraciones
√ What is your project named? ... next-uploadfile
√ Would you like to use TypeScript with this project? ... Yes
√ Would you like to use ESLint with this project? ... Yes
√ Would you like to use Tailwind CSS with this project? ... Yes
√ Would you like to use `src/` directory with this project? ... Yes
√ Would you like to use experimental `app/` directory with this project? ... Yes
√ What import alias would you like configured? ... @/*
Una vez generado tendras un proyecto llamado: next-uploadfile, asi que usa el siguiente comando para ejecutarlo:
cd nextj-uploadfile
npm run dev
Creación el Frontend
Una vez creado el proyecto vamos a crear una interfaz sencilla de Frontend:
"use client";
import { useState } from "react";
function HomePage() {
const [file, setFile] = useState(null);
const [imageUrl, setImageUrl] = useState(null);
return (
<div>
<form
onSubmit={async (e) => {
e.preventDefault();
const formData = new FormData();
formData.append("image", file);
const response = await fetch("/api/upload", {
method: "POST",
body: formData,
});
const data = await response.json();
console.log(data);
setImageUrl(data.url)
}}
>
<input
type="file"
onChange={(e) => {
setFile(e.target.files[0]);
}}
/>
<button>Enviar</button>
</form>
{
imageUrl && (
<img src={imageUrl} alt="" />
)
}
</div>
);
}
export default HomePage;
Y luego vamos a crear una API de backend para que reciba el archivo subido:
import { nextresponse } from "next/server";
import { writefile } from "fs/promises";
import path from "path";
export async function post(request) {
const data = await request.formdata();
const image = data.get("image");
if (!image) {
return nextresponse.json("no se ha subido ninguna imagen", { status: 400 });
}
const bytes = await image.arraybuffer();
const buffer = buffer.from(bytes);
const filepath = path.join(process.cwd(), "public", image.name);
await writefile(filepath, buffer)
return nextresponse.json({
message: "imagen subida",
url: `/${image.name}`
});
}
Una vez hecho esto estarás subiendo archivos desde el Frontend al backend de Nextjs y este guardara los archivos en la carpeta public. Aunque en realidad puedes guardarlo en cualquier parte ruta que desees.
Finalmente el subir archivos de esta forma esta bien para empezar la aplicación, pero cuando se trata de un proyecto que va a depender de muchos archivos como imágenes, videos, audios, pdfs, etc. Es mucho mejor usar un servicio por a parte que solo almacene nuestros archivos y tan solo nos de la dirección de donde estan.
Entre este tipo de servicios podemos encontrar a Cloudinary, Digitalocean Spaces, AWS S3, Google Cloud Storage, Azure Blob Storage y muchos otros servicios más.