De nombreuses applications dépendent du web pour leur contenu. En hébergeant les ressources image sur une plateforme cloud tierce, vous pouvez vous assurer que vos applications y ont un accès rapide et efficace.
De plus, vous éviterez les coûts de stockage et de bande passante que vous auriez encourus en hébergeant les ressources sur des serveurs sur site. C’est pourquoi les solutions d’hébergement d’images en nuage comme Cloudinary sont de plus en plus populaires.
Suivez-nous pour apprendre à utiliser Cloudinary pour héberger vos images.
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 médias numériques sur une plateforme en nuage tierce.
Les ressources multimédias telles que les images sont essentielles à la création d’une expérience utilisateur de qualité pour toute application Web. Les services d’hébergement d’images vous permettent de télécharger, de stocker, d’extraire et de gérer facilement vos ressources à partir du cloud, ce qui améliore les performances de votre application en garantissant des temps de chargement plus rapides et une meilleure qualité d’image.
Qu’est-ce que Cloudinary ?
Cloudinary est une plateforme de gestion des médias basée sur le cloud. Elle offre des fonctionnalités qui facilitent le téléchargement, le stockage et la gestion des ressources multimédias numériques telles que les images et les vidéos. Essentiellement, Cloudinary facilite la gestion de tous vos médias numériques nécessaires à toute 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 panneau de menu de gauche.
Sur la page des paramètres, cliquez sur l’icône Télécharger pour ouvrir la page des paramètres de téléchargement.
Maintenant, rendez-vous sur la page Télécharger les préréglages section des paramètres 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éfinit la structure par défaut de tout fichier multimédia que vous téléchargez sur Cloudinary. Elles 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 pour les transmettre à votre application, ce qui améliore les performances et réduit le temps de chargement.
Remplissez le nom de votre présélection et sélectionnez 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édias.
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 se chargera ensuite de la livrer sur demande.
Après avoir effectué ces modifications, allez-y et cliquez sur Enregistrer pour créer la présélection de téléchargement.
Créer une application React de démonstration
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 depuis le 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 effectue une requête POST vers le point de terminaison API de Cloudinary pour télécharger des fichiers image sur le stockage en nuage de Cloudinary. Vous déstructurerez ensuite la réponse 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 « components ». 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 de téléchargement :
- 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, la valeur de la variable uploadFile est mise à jour.
- Le site handleUpload La fonction handleUpload utilise Axios pour effectuer une demande d’envoi à Cloudinary. Elle transmet le fichier téléchargé et le préréglage de téléchargement que vous avez associé à votre compte Cloudinary. Un clic sur le bouton d’envoi appelle cette fonction.
- Lorsque le code reçoit une réponse, il stocke les données de la fonction secure_url de l’image Cloudinary en état.
- Enfin, il rend deux sections, l’une pour le téléchargement du fichier et l’autre pour l’affichage de l’image résultante.
Importez et rendez 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 aurez sélectionné et téléchargé le fichier image :
Accédez à votre compte Cloudinary et cliquez sur le lien suivant Médiathèque pour visualiser 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. En outre, 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 du répertoire /public. Ajoutez la balise script ci-dessous à 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 hooks 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)
});
}, []);Le code ci-dessus crée une référence à l’objet Cloudinary et au widget de téléchargement à l’aide du crochet useRef. Le crochet useEffect exécute le code dans le callback une fois que le composant est monté. Vous initialisez ensuite le widget en utilisant le nom de votre nuage et le nom de votre préréglage de téléchargement, puis vous enregistrez les résultats et les erreurs qui peuvent se produire à partir du widget.
- Enfin, créez un bouton qui, lorsqu’il est 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 est une solution conviviale qui simplifie le processus de gestion des fichiers d’images et autres ressources multimédias.
En plus de fournir une plateforme de stockage en nuage, Cloudinary offre également des fonctionnalités telles que la transformation et l’optimisation des images. Ce sont des outils essentiels pour améliorer la qualité de vos ressources multimédias.