Come ospitare file immagine su Cloudinary in un’applicazione React
Molte applicazioni dipendono dal Web per il loro contenuto. Ospitando le risorse immagine su una piattaforma cloud di terze parti, puoi assicurarti che le tue app possano accedervi in modo rapido ed efficiente.
Inoltre, eviterai i costi di archiviazione e larghezza di banda che dovresti sostenere ospitando le risorse utilizzando server locali. Questo è il motivo per cui le soluzioni cloud di hosting di immagini come Cloudinary sono diventate sempre più popolari.
Segui per scoprire come utilizzare Cloudinary per ospitare le tue risorse immagine.
Che cos’è l’hosting di immagini e perché è importante?
L’hosting di immagini è un tipo di servizio di web hosting che ti consente di archiviare e accedere alle tue risorse di immagini o altri media digitali su una piattaforma cloud di terze parti.
Le risorse multimediali come le immagini sono essenziali per creare un’ottima esperienza utente per qualsiasi applicazione web. I servizi di hosting di immagini semplificano il caricamento, l’archiviazione, il recupero e la gestione delle risorse dal cloud, migliorando di conseguenza le prestazioni dell’applicazione garantendo tempi di caricamento più rapidi e una migliore qualità dell’immagine.
Cos’è Cloudinary?
Cloudinary è una piattaforma di gestione dei media basata su cloud. Fornisce funzionalità che semplificano il caricamento, l’archiviazione e la gestione di risorse multimediali digitali come immagini e video. In sostanza, Cloudinary semplifica la gestione di tutti i tuoi media digitali necessari per qualsiasi applicazione da un’unica piattaforma.
Imposta un progetto Cloudinary per ospitare file immagine
Per iniziare con il caricamento e l’hosting di file immagine, registrati per un account Cloudinary .
Accedi alla dashboard del tuo account e fai clic sulla scheda dell’icona delle impostazioni nel riquadro del menu a sinistra.
Nella pagina delle impostazioni, fare clic sul pulsante Carica per aprire la pagina delle impostazioni di caricamento.
Ora vai alla sezione delle impostazioni dei preset di caricamento e fai clic su Aggiungi preset di caricamento per creare un nuovo preset di caricamento per la tua applicazione.
Un preset di caricamento è una configurazione di parametri che definiscono la struttura predefinita di qualsiasi file multimediale caricato su Cloudinary. Ti consentono di definire una serie di regole da applicare ogni volta che carichi un file multimediale.
I parametri preimpostati assicurano che Cloudinary ottimizzi tutti i file multimediali per la consegna alla tua applicazione, migliorando le prestazioni e riducendo il tempo di caricamento.
Inserisci il nome del tuo preset e seleziona la modalità non firmata dal menu a discesa visualizzato. Le modalità di firma consentono di specificare i metodi utilizzati da Cloudinary per autenticare e autorizzare eventuali caricamenti multimediali.
La selezione della modalità non firmata ti consentirà di effettuare caricamenti nel tuo archivio Cloudinary dalle tue applicazioni senza autenticarti con Cloudinary. In poche parole, questa modalità ti consente di selezionare un’immagine e caricarla direttamente dalla tua applicazione. Cloudinary lo consegnerà quindi su richiesta.
Dopo aver apportato tali modifiche, vai avanti e fai clic su Salva per creare il predefinito di caricamento.
Crea un’applicazione Demo React
Puoi configurare una semplice applicazione React per gestire la funzionalità di caricamento utilizzando l’endpoint API Cloudinary e il widget di caricamento.
Per iniziare, crea un’applicazione React demo. Quindi, esegui il comando seguente per avviare il server di sviluppo e vai a http://localhost:3000 sul tuo browser per visualizzare i risultati.
npm start
Successivamente, esegui questo comando per installare Axios, una libreria JavaScript utilizzata per effettuare richieste HTTP dal browser.
npm install axios
Carica file immagine utilizzando l’endpoint API Cloudinary
Dopo aver configurato l’app React, crea un componente di caricamento che effettua una richiesta POST all’endpoint API di Cloudinary per caricare i file di immagine sull’archivio cloud Cloudinary. Quindi destrutturerai la risposta API per visualizzare l’immagine caricata.
Crea un componente di caricamento
Nella directory /src, crea una nuova cartella e chiamala componenti. In questa cartella, crea un nuovo file, Upload.js.
Nel file Upload.js, aggiungi il codice seguente:
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;
Ecco cosa fa il codice di caricamento:
- Dichiara due stati, uploadFile e cloudinaryImage . Li utilizza per archiviare il file caricato e l’immagine risultante da Cloudinary.
- Il campo di input consente di selezionare un file immagine dal file system della macchina. Quando selezioni un file, aggiorna il valore della variabile uploadFile.
- La funzione handleUpload utilizza Axios per inviare una richiesta a Cloudinary. Passa nel file caricato e nel preset di caricamento che hai associato al tuo account cloud Cloudinary. Facendo clic sul pulsante di invio si chiama questa funzione.
- Quando il codice riceve una risposta, memorizza il secure_url dell’immagine Cloudinary nello stato.
- Infine, esegue il rendering di due sezioni, una per il caricamento del file e l’altra per la visualizzazione dell’immagine risultante.
Importa ed esegui il rendering del componente upload.js nel tuo file app.js. Dovresti vedere una risposta come questa nel tuo browser dopo aver selezionato e caricato il file immagine:
Vai al tuo account Cloudinary e fai clic sulla scheda Libreria multimediale per visualizzare il file caricato.
Carica i file di immagine utilizzando il widget Cloudinary
L’integrazione del widget Cloudinary nella tua applicazione React semplifica notevolmente il processo di caricamento. Inoltre, il widget ti consente di caricare file immagine da varie fonti, come Dropbox.
Per integrare il widget nella tua app React, per prima cosa devi includere la libreria JavaScript remota del widget nel tuo file index.html nella directory /public. Aggiungi il tag script qui sotto nella sezione head nel tuo file index.html.
<script src="https://upload-widget.cloudinary.com/global/all.js"
type="text/javascript"></script>
Successivamente, nel tuo file upload.js, aggiungi apportare le seguenti modifiche:
- Importa i seguenti hook React: useEffect e useRef.
import {useState, useEffect, useRef} from 'react'; - Aggiungi il codice qui sotto:
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)
});
}, []); - Infine, crea un pulsante che, una volta cliccato, invocherà e aprirà il widget di caricamento.
<button onClick = { () => widgetRef.current.open()} >
Upload Via Widget
</button>
Ottenere il massimo da Cloudinary
Cloudinary fornisce una soluzione intuitiva che semplifica il processo di gestione dei file immagine e di altre risorse multimediali.
Oltre a fornire una piattaforma di archiviazione cloud, Cloudinary offre anche funzionalità come la trasformazione delle immagini e l’ottimizzazione delle immagini. Questi sono strumenti essenziali per migliorare la qualità delle tue risorse multimediali.
Lascia un commento