Como hospedar arquivos de imagem no Cloudinary em um aplicativo React
Muitos aplicativos dependem da web para seu conteúdo. Ao hospedar ativos de imagem em uma plataforma de nuvem de terceiros, você pode garantir que seus aplicativos tenham acesso rápido e eficiente a eles.
Além disso, você evitará os custos de armazenamento e largura de banda em que incorreria hospedando os ativos usando servidores no local. É por isso que as soluções de nuvem de hospedagem de imagens, como Cloudinary, tornaram-se cada vez mais populares.
Acompanhe para saber como usar o Cloudinary para hospedar seus ativos de imagem.
O que é hospedagem de imagens e por que é importante?
A hospedagem de imagens é um tipo de serviço de hospedagem na web que permite armazenar e acessar seus ativos de imagem ou outras mídias digitais em uma plataforma de nuvem de terceiros.
Ativos de mídia, como imagens, são essenciais para criar uma ótima experiência do usuário para qualquer aplicativo da web. Os serviços de hospedagem de imagens facilitam o upload, o armazenamento, a recuperação e o gerenciamento de seus ativos da nuvem e, consequentemente, aprimoram o desempenho de seu aplicativo, garantindo tempos de carregamento mais rápidos e melhor qualidade de imagem.
O que é Cloudinário?
Cloudinary é uma plataforma de gerenciamento de mídia baseada em nuvem. Ele fornece recursos que facilitam o upload, armazenamento e gerenciamento de ativos de mídia digital, como imagens e vídeos. Essencialmente, o Cloudinary facilita o gerenciamento de todas as suas mídias digitais necessárias para qualquer aplicativo de uma plataforma.
Configurar um projeto Cloudinary para hospedar arquivos de imagem
Para começar a carregar e hospedar arquivos de imagem, inscreva-se em uma conta Cloudinary .
Faça login no painel da sua conta e clique na guia do ícone de configurações no painel de menu à esquerda.
Na página de configurações, clique no botão Upload para abrir a página de configurações de upload.
Agora, vá para a seção Configurações de predefinições de upload e clique em Adicionar predefinição de upload para criar uma nova predefinição de upload para seu aplicativo.
Uma predefinição de upload é uma configuração de parâmetros que definem a estrutura padrão de qualquer arquivo de mídia que você carrega no Cloudinary. Eles permitem que você defina um conjunto de regras a serem aplicadas sempre que fizer upload de um arquivo de mídia.
Os parâmetros predefinidos garantem que o Cloudinary otimize todos os arquivos de mídia para entrega ao seu aplicativo, melhorando o desempenho e reduzindo o tempo de carregamento.
Preencha o nome da sua predefinição e selecione o modo não assinado no menu suspenso exibido. Os modos de assinatura permitem que você especifique os métodos que o Cloudinary usa para autenticar e autorizar qualquer upload de mídia.
Selecionar o modo não assinado permitirá que você faça uploads para seu armazenamento Cloudinary de seus aplicativos sem autenticação com Cloudinary. Simplificando, este modo permite selecionar uma imagem e carregá-la diretamente de seu aplicativo. Cloudinary irá entregá-lo mediante solicitação.
Depois de fazer essas alterações, vá em frente e clique em Salvar para criar a predefinição de upload.
Crie um aplicativo React de demonstração
Você pode configurar um aplicativo React simples para lidar com a funcionalidade de upload usando o endpoint da API Cloudinary e o widget de upload.
Para começar, crie um aplicativo React de demonstração. Em seguida, execute o comando abaixo para ativar o servidor de desenvolvimento e navegue até http://localhost:3000 em seu navegador para visualizar os resultados.
npm start
Em seguida, execute este comando para instalar o Axios, uma biblioteca JavaScript usada para fazer solicitações HTTP do navegador.
npm install axios
Carregar arquivos de imagem usando Cloudinary API Endpoint
Depois de configurar o aplicativo React, crie um componente de upload que faça uma solicitação POST ao ponto de extremidade da API do Cloudinary para fazer upload de arquivos de imagem no armazenamento em nuvem do Cloudinary. Em seguida, você desestruturará a resposta da API para exibir a imagem carregada.
Criar um componente de upload
No diretório /src, crie uma nova pasta e nomeie-a, components. Nesta pasta, crie um novo arquivo, Upload.js.
No arquivo Upload.js, adicione o código abaixo:
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;
Veja o que o código de upload faz:
- Declara dois estados, uploadFile e cloudinaryImage . Ele os usa para armazenar o arquivo carregado e a imagem resultante do Cloudinary.
- O campo de entrada permite selecionar um arquivo de imagem do sistema de arquivos de sua máquina. Quando você seleciona um arquivo, ele atualiza o valor da variável uploadFile.
- A função handleUpload usa Axios para fazer uma solicitação post para Cloudinary. Ele passa o arquivo carregado e a predefinição de upload que você associou à sua conta da nuvem Cloudinary. Clicar no botão enviar chama essa função.
- Quando o código recebe uma resposta, ele armazena o secure_url da imagem Cloudinary no estado.
- Por fim, renderiza duas seções, uma para carregar o arquivo e outra para exibir a imagem resultante.
Importe e renderize o componente upload.js em seu arquivo app.js. Você deve ver uma resposta como esta em seu navegador depois de selecionar e carregar o arquivo de imagem:
Vá para sua conta Cloudinary e clique na guia Biblioteca de mídia para visualizar o arquivo carregado.
Carregar arquivos de imagem usando o widget Cloudinary
Integrar o widget Cloudinary em seu aplicativo React simplifica significativamente o processo de upload. Além disso, o widget permite fazer upload de arquivos de imagem de várias fontes, como o Dropbox.
Para integrar o widget em seu aplicativo React, primeiro você precisa incluir a biblioteca JavaScript remota do widget em seu arquivo index.html no diretório /public. Adicione a tag script abaixo na seção head de seu arquivo index.html.
<script src="https://upload-widget.cloudinary.com/global/all.js"
type="text/javascript"></script>
Em seguida, em seu arquivo upload.js, adicione as seguintes alterações:
- Importe os seguintes hooks do React: useEffect e useRef.
import {useState, useEffect, useRef} from 'react'; - Adicione o código abaixo:
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)
});
}, []); - Por fim, crie um botão que, quando clicado, invocará e abrirá o widget de upload.
<button onClick = { () => widgetRef.current.open()} >
Upload Via Widget
</button>
Aproveitando ao máximo o Cloudinary
Cloudinary fornece uma solução amigável que simplifica o processo de gerenciamento de arquivos de imagem e outros ativos de mídia.
Além de fornecer uma plataforma de armazenamento em nuvem, o Cloudinary também oferece recursos como transformações e otimização de imagens. Essas são ferramentas essenciais para melhorar a qualidade de seus ativos de mídia.
Deixe um comentário