Cómo alojar archivos de imagen en Cloudinary en una aplicación React
Muchas aplicaciones dependen de la web para su contenido. Al alojar activos de imágenes en una plataforma en la nube de terceros, puede asegurarse de que sus aplicaciones tengan un acceso rápido y eficiente a ellos.
Además, evitará los costes de almacenamiento y ancho de banda en los que incurriría al alojar los activos mediante servidores locales. Esta es la razón por la que las soluciones en la nube de alojamiento de imágenes como Cloudinary se han vuelto cada vez más populares.
Siga para aprender a usar Cloudinary para alojar sus activos de imagen.
¿Qué es el alojamiento de imágenes y por qué es importante?
El alojamiento de imágenes es un tipo de servicio de alojamiento web que le permite almacenar y acceder a sus activos de imagen u otros medios digitales en una plataforma de nube de terceros.
Los recursos multimedia, como las imágenes, son esenciales para crear una excelente experiencia de usuario para cualquier aplicación web. Los servicios de alojamiento de imágenes facilitan la carga, el almacenamiento, la recuperación y la administración de sus activos desde la nube y, en consecuencia, mejoran el rendimiento de su aplicación al garantizar tiempos de carga más rápidos y una mejor calidad de imagen.
¿Qué es nuboso?
Cloudinary es una plataforma de gestión de medios basada en la nube. Proporciona funciones que facilitan la carga, el almacenamiento y la administración de activos de medios digitales, como imágenes y videos. Esencialmente, Cloudinary facilita la administración de todos sus medios digitales necesarios para cualquier aplicación desde una plataforma.
Configurar un proyecto de Cloudinary para alojar archivos de imagen
Para comenzar a cargar y alojar archivos de imágenes, regístrese para obtener una cuenta de Cloudinary .
Inicie sesión en el panel de control de su cuenta y haga clic en la pestaña del icono de configuración en el panel de menú izquierdo.
En la página de configuración, haga clic en el botón Cargar para abrir la página de configuración de carga.
Ahora, diríjase a la sección Configuración de valores predeterminados de carga y haga clic en Agregar valor predeterminado de carga para crear un nuevo valor predeterminado de carga para su aplicación.
Un ajuste preestablecido de carga es una configuración de parámetros que define la estructura predeterminada de cualquier archivo multimedia que cargue en Cloudinary. Le permiten definir un conjunto de reglas para aplicar cada vez que cargue un archivo multimedia.
Los parámetros preestablecidos aseguran que Cloudinary optimice todos los archivos multimedia para entregarlos a su aplicación, mejorando el rendimiento y reduciendo el tiempo de carga.
Complete el nombre de su ajuste preestablecido y seleccione el modo sin firmar en el menú desplegable que se muestra. Los modos de firma le permiten especificar los métodos que usa Cloudinary para autenticar y autorizar cualquier carga de medios.
Si selecciona el modo sin firmar, podrá realizar cargas en su almacenamiento de Cloudinary desde sus aplicaciones sin autenticarse con Cloudinary. En pocas palabras, este modo le permite seleccionar una imagen y cargarla directamente desde su aplicación. Cloudinary luego lo entregará a pedido.
Después de realizar esos cambios, continúe y haga clic en Guardar para crear el ajuste preestablecido de carga.
Crear una aplicación de reacción de demostración
Puede configurar una aplicación React simple para manejar la funcionalidad de carga utilizando el punto final de la API de Cloudinary y el widget de carga.
Para comenzar, cree una aplicación React de demostración. A continuación, ejecute el siguiente comando para activar el servidor de desarrollo y navegue a http://localhost:3000 en su navegador para ver los resultados.
npm start
A continuación, ejecute este comando para instalar Axios, una biblioteca de JavaScript utilizada para realizar solicitudes HTTP desde el navegador.
npm install axios
Cargar archivos de imagen mediante el punto final de la API de Cloudinary
Después de configurar la aplicación React, cree un componente de carga que realice una solicitud POST al extremo de la API de Cloudinary para cargar archivos de imagen en el almacenamiento en la nube de Cloudinary. Luego, desestructurará la respuesta de la API para mostrar la imagen cargada.
Crear un componente de carga
En el directorio /src, cree una nueva carpeta y asígnele el nombre components. En esta carpeta, cree un nuevo archivo, Upload.js.
En el archivo Upload.js, agregue el siguiente código:
import React, {useState} from 'react';
import Axios from "axios";
function Upload() {
const [uploadFile, setUploadFile] = useState("");
const [cloudinaryImage, setCloudinaryImage] = useState("")
const handleUpload = (e) => {
e.preventDefault();
const formData = new FormData ();
formData.append("file", uploadFile);
formData.append("upload_preset", "your upload preset name");
Axios.post(
"https://api.cloudinary.com/v1_1/your Cloudinary cloud name/image/upload",
formData
)
.then((response) => {
console.log(response);
setCloudinaryImage(response.data.secure_url);
})
.catch((error) => {
console.log(error);
});
};
return (
<div className="App">
<section className="left-side">
<form>
<h3> Upload Images to Cloudinary Cloud Storage</h3>
<div>
<input type="file"
onChange ={(event) => {setUploadFile(event.target.files[0]);}}
/>
</div>
<button onClick = {handleUpload}> Upload File</button>
</form>
</section>
<section className="right-side">
<h3>The resulting image will be displayed here</h3>
{cloudinaryImage && (<img src={cloudinaryImage} />)}
</section>
</div>
);
}
export default Upload;
Esto es lo que hace el código de carga:
- Declara dos estados, uploadFile y cloudinaryImage . Los utiliza para almacenar el archivo cargado y la imagen resultante de Cloudinary.
- El campo de entrada le permite seleccionar un archivo de imagen del sistema de archivos de su máquina. Cuando selecciona un archivo, actualiza el valor de la variable uploadFile.
- La función handleUpload usa Axios para realizar una solicitud de publicación a Cloudinary. Transfiere el archivo cargado y el ajuste preestablecido de carga que ha asociado con su cuenta en la nube de Cloudinary. Al hacer clic en el botón Enviar, se llama a esta función.
- Cuando el código recibe una respuesta, almacena la URL segura de la imagen de Cloudinary en el estado.
- Finalmente, renderiza dos secciones, una para cargar el archivo y otra para mostrar la imagen resultante.
Importe y represente el componente upload.js en su archivo app.js. Debería ver una respuesta como esta en su navegador una vez que seleccione y cargue el archivo de imagen:
Dirígete a tu cuenta de Cloudinary y haz clic en la pestaña Biblioteca multimedia para ver el archivo cargado.
Cargar archivos de imagen usando el widget de Cloudinary
La integración del widget de Cloudinary en su aplicación React simplifica significativamente el proceso de carga. Además, el widget le permite cargar archivos de imágenes de varias fuentes, como Dropbox.
Para integrar el widget en su aplicación React, primero debe incluir la biblioteca JavaScript remota del widget en su archivo index.html en el directorio /public. Agregue la etiqueta de secuencia de comandos a continuación en la sección principal de su archivo index.html.
<script src="https://upload-widget.cloudinary.com/global/all.js"
type="text/javascript"></script>
A continuación, en su archivo upload.js, agregue los siguientes cambios:
- Importe los siguientes ganchos de React: useEffect y useRef.
import {useState, useEffect, useRef} from 'react'; - Agregue el código a continuación:
const cloudinaryRef = useRef();
const widgetRef = useRef();
useEffect(() => {
cloudinaryRef.current = window.cloudinary;
widgetRef.current = cloudinaryRef.current.createUploadWidget({
cloudName: 'your cloudinary cloud name',
uploadPreset: 'the upload preset name'
}, (error, result) => {
console.log(error, result)
});
}, []); - Finalmente, cree un botón que, cuando se haga clic, invocará y abrirá el widget de carga.
<button onClick = { () => widgetRef.current.open()} >
Upload Via Widget
</button>
Sacar el máximo provecho de Cloudinary
Cloudinary proporciona una solución fácil de usar que simplifica el proceso de gestión de archivos de imágenes y otros recursos multimedia.
Además de proporcionar una plataforma de almacenamiento en la nube, Cloudinary también ofrece funciones como transformaciones de imágenes y optimización de imágenes. Estas son herramientas esenciales para mejorar la calidad de sus activos multimedia.
Deja una respuesta