gfxargentina

16-03-2023

Como subir imagenes con NextJS y Next-Cloudinary

Next-cloudinary es una libreria para usar en Next.JS creada por Colby Fayock, pueden leer su documentación aqui

En los ultimos meses estuve programando una web app donde necesitaba subir imagenes y luego utilizarlas en la app, en este post les comparto los pasos que segui para hacerlo, como siempre no soy un experto y cualquier error que encuentren o si saben alguna forma de mejorar el codigo, les agradeceria lo escriban en los comentarios.

0 paso

Crearse una cuenta en cloudinary y sacar las keys que tienen que usar en el archivo .env

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=""
NEXT_PUBLIC_CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=

1er paso:

instalamos next-cloudinary , es una libreria que les permitira subir imagenes a Cloudinary mediante un widget

npm install next-cloudinary

2 paso

creamos el archivo donde queremos usar next-cloudinary y lo importamos

import { CldUploadWidget } from 'next-cloudinary';

3 paso

Creamos un objeto con las opciones que le mandaremos al widget next-cloudinary

con estas opciones le indicamos al widget a que carpeta queremos subir las imagenes, si queremos permitir que se puedan subir imagenes de facebook, instagram etc, tiene muchas opciones mas, en este caso solo permito que se puedan subir imagenes desde el dispositivo, tambien le agrego la traduccion al español del widget

4 paso

Agregamos el widget al html

Cloudinary permite varios metodos para subir imagenes a su servidor, los mas comunes son signed y unsigned, el metodo unsigned no es recomendado, pueden ver mas info aqui

para usar el metodo signed usaremos una api que mas abajo les dejo el codigo.

Breve explicacion de CldUploadWidget

signatureEndpoint="/api/cloudinary"

es la api a la que le pegaremos para usar el metodo signed

onUpload={function (result, widget) {
                      setImagen(result.info.eager[0].url);
                    }}

esto nos devuelve la url que utilizaremos despues en nuestra app,guarda la url que nos devuelve en el estado imagen, la url mas basica se encuentra en result.info.secure_url, en este caso mi url se encuentra en result.info.eager[0].url porque estoy usando un 'upload presets' con transformaciones, en cloudinary podemos usar las transformaciones para editar la imagen que subimos, ej. agrandar, acortar, que se centre la imagen en la cara de la persona etc, tiene un monton de transformaciones, pueden encontrar mas info aqui Cloudinary transformaciones de imagenes

uploadPreset="tu--upload-preset-aqui"

este es el upload preset que aplicara las transformaciones, pueden ver como crear un upload preset aqui

options={cloudinaryOptions}

las opciones que explique mas arriba

{({ open }) => {
                      function handleOnClick(e) {
                        setImagen(undefined);
                        e.preventDefault();
                        open();
                      }

esto abre el widget para que subamos la imagen

5 paso

Creamos la api para que firme(signed) la subida de las imagenes

en la carpeta pages/api creamos una carpeta con el nombre que quieras, yo le puse cloudinary y le copiamos el codigo de este gist

gist api nextjs

6 paso

controlador de la api, crea un archivo con el nombre que quieras, yo le puse sign-cloudinary.js, le copiamos este gist, recuerda que debes importar este archivo en el archivo de la api

gist controlador api

y eso es todo, espero les sirva, cualquier duda o problema me pueden contactar y los ayudare en lo que pueda, les dejo el codigo del componente en este gist

componente nextjs

Tutoriales y articulos que me ayudaron:

Videotutorial del creador de Next-Cloudinary

Aqui pueden encontrar los parametros que se le pueden pasar a CldUploadWidget:

Cloudinary Upload Widget

Github Next-Cloudinary

Canal de youtube de cloudinary donde hay un monton de tutoriales sobre todo lo que podes hacer con las imagenes, video y audio, muy recomendado:

Youtube Cloudinary