Comment héberger des fichiers image sur Cloudinary dans une application React
De nombreuses applications dépendent du Web pour leur contenu. En hébergeant des ressources d’image sur une plate-forme cloud tierce, vous pouvez vous assurer que vos applications y ont accès rapidement et efficacement.
De plus, vous éviterez les coûts de stockage et de bande passante que vous encourriez en hébergeant les actifs à l’aide de serveurs sur site. C’est pourquoi les solutions cloud d’hébergement d’images comme Cloudinary sont devenues de plus en plus populaires.
Suivez-nous pour apprendre à utiliser Cloudinary pour héberger vos ressources d’image.
Qu’est-ce que l’hébergement d’images et pourquoi est-ce important ?
L’hébergement d’images est un type de service d’hébergement Web qui vous permet de stocker et d’accéder à vos images ou à d’autres supports numériques sur une plateforme cloud tierce.
Les ressources multimédias telles que les images sont essentielles pour créer une excellente expérience utilisateur pour toute application Web. Les services d’hébergement d’images vous permettent de télécharger, de stocker, de récupérer et de gérer facilement vos actifs à partir du cloud, améliorant ainsi les performances de votre application en garantissant des temps de chargement plus rapides et une meilleure qualité d’image.
Qu’est-ce que le cloudinaire ?
Cloudinary est une plateforme de gestion des médias basée sur le cloud. Il fournit des fonctionnalités qui vous permettent de télécharger, de stocker et de gérer facilement des ressources multimédias numériques telles que des images et des vidéos. Essentiellement, Cloudinary facilite la gestion de tous vos médias numériques nécessaires à n’importe quelle application à partir d’une seule plateforme.
Configurer un projet Cloudinary pour héberger des fichiers image
Pour commencer à télécharger et à héberger des fichiers image, créez un compte Cloudinary .
Connectez-vous au tableau de bord de votre compte et cliquez sur l’onglet de l’icône des paramètres dans le volet de menu de gauche.
Sur la page des paramètres, cliquez sur le bouton Télécharger pour ouvrir la page des paramètres de téléchargement.
Maintenant, rendez-vous dans la section Paramètres de téléchargement des préréglages et cliquez sur Ajouter un préréglage de téléchargement pour créer un nouveau préréglage de téléchargement pour votre application.
Un préréglage de téléchargement est une configuration de paramètres qui définissent la structure par défaut de tout fichier multimédia que vous téléchargez sur Cloudinary. Ils vous permettent de définir un ensemble de règles à appliquer chaque fois que vous téléchargez un fichier multimédia.
Les paramètres prédéfinis garantissent que Cloudinary optimise tous les fichiers multimédias à livrer à votre application, améliorant les performances et réduisant le temps de chargement.
Remplissez le nom de votre préréglage et sélectionnez le mode non signé dans le menu déroulant affiché. Les modes de signature vous permettent de spécifier les méthodes utilisées par Cloudinary pour authentifier et autoriser tout téléchargement de média.
La sélection du mode non signé vous permettra d’effectuer des téléchargements vers votre stockage Cloudinary à partir de vos applications sans vous authentifier auprès de Cloudinary. En termes simples, ce mode vous permet de sélectionner une image et de la télécharger directement depuis votre application. Cloudinary le livrera ensuite sur demande.
Après avoir apporté ces modifications, continuez et cliquez sur Enregistrer pour créer le préréglage de téléchargement.
Créer une application démo React
Vous pouvez configurer une application React simple pour gérer la fonctionnalité de téléchargement à l’aide du point de terminaison de l’API Cloudinary et du widget de téléchargement.
Pour commencer, créez une application React de démonstration. Ensuite, exécutez la commande ci-dessous pour lancer le serveur de développement et accédez à http://localhost:3000 sur votre navigateur pour afficher les résultats.
npm start
Ensuite, exécutez cette commande pour installer Axios, une bibliothèque JavaScript utilisée pour effectuer des requêtes HTTP à partir du navigateur.
npm install axios
Télécharger des fichiers image à l’aide du point de terminaison de l’API Cloudinary
Après avoir configuré l’application React, créez un composant de téléchargement qui envoie une requête POST au point de terminaison de l’API Cloudinary pour télécharger des fichiers image sur le stockage cloud Cloudinary. Vous déstructurerez ensuite la réponse de l’API pour afficher l’image téléchargée.
Créer un composant de téléchargement
Dans le répertoire /src, créez un nouveau dossier et nommez-le composants. Dans ce dossier, créez un nouveau fichier, Upload.js.
Dans le fichier Upload.js, ajoutez le code ci-dessous :
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;
Voici ce que fait le code d’importation :
- Déclare deux états, uploadFile et cloudinaryImage . Il les utilise pour stocker le fichier téléchargé et l’image résultante de Cloudinary.
- Le champ de saisie vous permet de sélectionner un fichier image dans le système de fichiers de votre machine. Lorsque vous sélectionnez un fichier, il met à jour la valeur de la variable uploadFile.
- La fonction handleUpload utilise Axios pour envoyer une demande de publication à Cloudinary. Il transmet le fichier téléchargé et le préréglage de téléchargement que vous avez associé à votre compte cloud Cloudinary. Cliquer sur le bouton Soumettre appelle cette fonction.
- Lorsque le code reçoit une réponse, il stocke le secure_url de l’image Cloudinary dans state.
- Enfin, il rend deux sections, une pour télécharger le fichier et l’autre pour afficher l’image résultante.
Importez et affichez le composant upload.js dans votre fichier app.js. Vous devriez voir une réponse comme celle-ci dans votre navigateur une fois que vous avez sélectionné et téléchargé le fichier image :
Rendez-vous sur votre compte Cloudinary et cliquez sur l’ onglet Médiathèque pour afficher le fichier téléchargé.
Télécharger des fichiers image à l’aide du widget Cloudinary
L’intégration du widget Cloudinary dans votre application React simplifie considérablement le processus de téléchargement. De plus, le widget vous permet de télécharger des fichiers image à partir de diverses sources, telles que Dropbox.
Pour intégrer le widget dans votre application React, vous devez d’abord inclure la bibliothèque JavaScript distante du widget dans votre fichier index.html dans le répertoire /public. Ajoutez la balise de script ci-dessous dans la section head de votre fichier index.html.
<script src="https://upload-widget.cloudinary.com/global/all.js"
type="text/javascript"></script>
Ensuite, dans votre fichier upload.js, ajoutez les modifications suivantes :
- Importez les crochets React suivants : useEffect et useRef.
import {useState, useEffect, useRef} from 'react'; - Ajoutez le code ci-dessous :
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)
});
}, []); - Enfin, créez un bouton qui, une fois cliqué, invoquera et ouvrira le widget de téléchargement.
<button onClick = { () => widgetRef.current.open()} >
Upload Via Widget
</button>
Tirer le meilleur parti de Cloudinary
Cloudinary fournit une solution conviviale qui simplifie le processus de gestion des fichiers image et autres ressources multimédias.
En plus de fournir une plate-forme de stockage en nuage, Cloudinary propose également des fonctionnalités telles que les transformations d’images et l’optimisation des images. Ce sont des outils essentiels pour améliorer la qualité de vos actifs médias.
Laisser un commentaire