- creamos el proyecto
- composer install
- npm install
- npm i @cloudinary/url-gen @cloudinary/react
- npm run dev
- .env: crear el enviroment
Explicación lado cliente: ste código está diseñado para cargar una imagen en Cloudinary utilizando una API Key y firma, y luego enviar la información de la imagen cargada de vuelta al servidor. Aquí tienes una explicación línea por línea:
Se definen dos variables api_key y cloud_name. api_key es la clave de API de Cloudinary y cloud_name es el nombre de tu espacio de Cloudinary.
Se agrega un event listener para el formulario con el id "upload-form". Este event listener se activa cuando se envía el formulario y previene el comportamiento predeterminado del formulario (recargar la página) usando e.preventDefault().
Se hace una solicitud asíncrona para obtener una firma (signature) llamando a una ruta "/get-signature" en el servidor. La firma se utiliza para autenticar la carga de la imagen en Cloudinary. Es importante mencionar que en un entorno de producción, la firma debería generarse en el servidor y no en el cliente para mayor seguridad.
Se crea un objeto FormData llamado data que se utiliza para almacenar los datos que se enviarán en la solicitud POST a Cloudinary. Se agrega el archivo seleccionado (document.querySelector("#file-field").files[0]), la api_key, la firma y la marca de tiempo (timestamp) obtenida de la respuesta de la solicitud de firma.
Se realiza una solicitud POST a la API de Cloudinary (https://api.cloudinary.com/v1_1/${cloud_name}/auto/upload) con los datos almacenados en data. Se establece el encabezado "Content-Type" como "multipart/form-data" para indicar que se está enviando un formulario multiparte, que es necesario para cargar archivos. También se utiliza onUploadProgress para mostrar el progreso de la carga en la consola.
Cuando la carga se completa, se muestra la respuesta de Cloudinary en la consola, que probablemente contenga información sobre la imagen cargada, como su identificador público (public_id) y versión (version).
Se crea un objeto photoData que contiene información relevante de la imagen cargada, como public_id, version y signature.
Se realiza una solicitud POST a "/do-something-with-photo" en el servidor con la información de la imagen. Aquí, se supone que el servidor realizará alguna acción específica con los datos de la imagen.
En resumen, este código permite a los usuarios cargar imágenes en Cloudinary desde un formulario en el cliente y luego enviar información relevante sobre la imagen cargada de vuelta al servidor para su procesamiento. La seguridad y autenticación dependen de cómo se genere y maneje la firma en el servidor.
Explicación lado servidor: Este código es un servidor Node.js que se utiliza en conjunto con el código del cliente que mencionaste anteriormente para cargar imágenes en Cloudinary y realizar algunas operaciones adicionales con ellas. Aquí tienes una explicación paso a paso del código del servidor:
Se comienza cargando los módulos necesarios. dotenv se utiliza para cargar variables de entorno desde un archivo .env, express es un framework web de Node.js, cloudinary es una biblioteca para interactuar con la API de Cloudinary, y fse es una biblioteca para trabajar con el sistema de archivos.
Se crea una instancia de la aplicación Express llamada app.
Se configura Express para usar archivos estáticos ubicados en la carpeta "public", lo que permite servir archivos estáticos como HTML, CSS y JavaScript.
Se configuran middleware de Express para manejar datos JSON (express.json()) y datos de formularios (express.urlencoded()).
Se configura la conexión a Cloudinary mediante el objeto cloudinaryConfig. Los valores de cloud_name, api_key, y api_secret se toman de las variables de entorno definidas en el archivo .env.
Se define un middleware llamado passwordProtected que protege ciertas rutas con autenticación básica. En este caso, se espera que el usuario proporcione un nombre de usuario y contraseña codificados en Base64 como "Basic YWRtaW46YWRtaW4=". Si la autenticación no es válida, se responde con un estado 401 (No autorizado).
Se usa el middleware passwordProtected en toda la aplicación, lo que significa que todas las rutas definidas después de esto requerirán autenticación básica.
Se define una ruta GET para la raíz ("/") que envía un formulario HTML para cargar imágenes y un enlace para ver las imágenes cargadas. También se incluyen scripts JavaScript para interactuar con el cliente.
Se define una ruta GET "/get-signature" que genera una firma (signature) para ser utilizada en la carga de imágenes a Cloudinary. La firma se basa en una marca de tiempo generada y el secreto de Cloudinary. Luego se devuelve la firma como una respuesta JSON.
Se define una ruta POST "/do-something-with-photo" que procesa la información de la imagen cargada. Se verifica la firma proporcionada en la solicitud para garantizar que los datos sean auténticos y se realizan algunas acciones, como guardar el identificador público (public_id) de la imagen en un archivo de texto.
Se define una ruta GET "/view-photos" que muestra una lista de las imágenes cargadas junto con la opción de eliminarlas. Las imágenes se obtienen del archivo de texto y se generan dinámicamente.
Se define una ruta POST "/delete-photo" que permite eliminar imágenes. Se elimina el registro del archivo de texto y se utiliza la API de Cloudinary para eliminar la imagen de Cloudinary.
Finalmente, el servidor se inicia escuchando en el puerto 3000.
En resumen, este servidor proporciona la funcionalidad para cargar imágenes en Cloudinary, gestionar las imágenes cargadas y permitir la eliminación de las mismas. También incluye autenticación básica para proteger ciertas rutas.