Como fazer upload de imagens para um depósito de armazenamento Supabase a partir de um aplicativo Next.js

Armazenar imagens em um banco de dados geralmente não é recomendado. Fazer isso pode se tornar caro rapidamente devido à quantidade de armazenamento e poder de processamento necessários. Usar um serviço de armazenamento econômico e escalável como o armazenamento Supabase é melhor.

Abaixo, você aprenderá como fazer upload de imagens para um depósito de armazenamento usando a biblioteca cliente Supabase JavaScript e como servir as imagens em um aplicativo Next.js.

Criando um Projeto Supabase

Se você ainda não tem um aplicativo Next.js pronto, siga o guia oficial Guia de primeiros passos do Next.js para criar seu aplicativo.

Depois de fazer isso, siga estas etapas para criar um banco de dados Supabase:

1. Navegue até o site Supabase e crie uma nova conta. Se voce já tem uma conta, faça o login.
2. No painel do Supabase, clique no botão Criar um novo projeto botão.
instagram viewer
3. Dê um nome ao seu projeto e clique no botão Criar projeto botão. Depois que o Supabase criar o projeto, ele o redirecionará para o painel do projeto

Depois de criar o projeto, crie um bucket de armazenamento.

Criando um bucket de armazenamento Supabase

Um balde de armazenamento permite armazenar arquivos de mídia como imagens e vídeos. No Supabase, você pode criar um depósito de armazenamento no painel ou usar a biblioteca do cliente.

Para usar o painel, siga estas etapas:

1. Vou ao Armazenamento Supabase página no Painel.
2. Clique Novo Balde e insira um nome para o depósito. Você pode nomeá-lo como imagens, pois estará armazenando imagens nele.
3. Clique Criar intervalo.

Em seguida, você configurará um cliente Supabase em seu aplicativo para interagir com o balde.

Configurando o cliente Supabase

Comece instalando a biblioteca cliente supabase-js através do terminal:

npm install @supabase/supabase-js

Em seguida, crie uma nova pasta chamada lib na raiz do seu aplicativo ou na pasta src se estiver usando. Nesta pasta, adicione um novo arquivo chamado supabase.js e use o seguinte código para inicializar o cliente Supabase.

importar {criarCliente} de'@supabase/supabase-js'
exportarconst supabase = criarCliente('', '')

Substitua o URL do projeto e a chave anônima por seus próprios detalhes que você pode encontrar no Supabase configurações do projeto. Você pode copiar os detalhes no arquivo .env e referenciá-los a partir daí.

SUPABASE_PROJECT_URL="seu_projeto_url"
SUPABASE_PROJECT_ANON_KEY="seu_projeto_anon_key"

Agora, no supabase.js, você deve ter:

exportarconst supabase = criarCliente(
 process.env. SUPABASE_PROJECT_URL,
 process.env. SUPABASE_ANON_KEY
);

Depois de fazer isso, crie um formulário que aceite as imagens.

Criando um formulário que aceita imagens

Dentro a pasta do aplicativo Next.js do seu aplicativo, crie uma subpasta chamada carregar e adicione um novo arquivo chamado page.js. Isso criará uma nova página disponível na rota /upload. Se você estiver usando Next.js 12, crie upload.js no Páginas pasta.

Na página de upload, adicione o código a seguir para criar o formulário.

"usar cliente";
importar { useState } de"reagir";
exportarpadrãofunçãoPágina() {
const [arquivo, setarquivo] = useState([]);
const handleEnviar = assíncrono (e) => {
 e.preventDefault();
// Enviar Imagem
 };
const handleFileSelected = (e) => {
 setfile (e.target.files[0]);
 };
retornar (


"arquivo" nome="imagem" onChange={handleFileSelected} />
"enviar">Carregar imagem</button>
 </form>
 );
}

Quando você seleciona um arquivo e clica no botão enviar, o formulário deve chamar a função handleSubmit. É nessa função que você vai fazer o upload da imagem.

Para formulários grandes com vários campos, pode ser mais fácil use uma biblioteca de formulários como formik para lidar com validação e envio.

Fazendo upload de um arquivo de imagem para um bucket de armazenamento Supabase

Na função handleSubmit, use o cliente Supabase para carregar a imagem adicionando o código abaixo.

const handleEnviar = assíncrono (e) => {
 e.preventDefault();
const nome do arquivo = `${uuidv4()}-${file.name}`;
const { dados, erro } = aguardam supabase.storage
 .de("imagens")
 .upload (nome do arquivo, arquivo, {
 controle de cache: "3600",
 Inserir: falso,
 });
const caminho do arquivo = data.path;
// salva o caminho do arquivo no banco de dados
 };

Nesta função, você está criando um nome de arquivo exclusivo concatenando o nome do arquivo e um UUID gerado pelo pacote uuid npm. Isso é recomendado para evitar a substituição de arquivos que compartilham o mesmo nome.

Você precisará instalar o pacote uuid via npm, então copie e execute o comando abaixo no terminal.

npm install uuid

Em seguida, no topo da página de upload, importe a versão 4 do uuid.

importar {v4 como uuidv4 } de"uuid";

Se você não quiser usar o pacote uuid, existem alguns outros métodos que você pode usar para gerar IDs exclusivos.

Em seguida, use o cliente supabase para fazer upload do arquivo para o depósito de armazenamento chamado “imagens”. Lembre-se de importar o cliente supabase no topo do seu arquivo.

importar { supabase } de"@/lib/supabase";

Observe que você está passando o caminho para a imagem e a própria imagem. Esse caminho funciona da mesma forma que no sistema de arquivos. Por exemplo, se você estivesse salvando a imagem em uma pasta no bucket chamada public, você especificaria o caminho como “/public/filename”.

Supabase retornará um objeto contendo os dados e o objeto de erro. O objeto de dados contém o URL da imagem que você acabou de carregar.

Para que esta função de upload funcione, você deve criar uma política de acesso que permita que seu aplicativo insira e leia dados em um depósito de armazenamento Supabase seguindo estas etapas:

1. No painel do seu projeto, clique no botão Armazenar guia na barra lateral esquerda.
2. Selecione seu bucket de armazenamento e clique no botão Acesso aba.
3. Sob Políticas de balde, Clique no Nova política botão.
4. Selecione os Para personalização completa opção para criar uma política do zero.
5. No Adicionar política caixa de diálogo, insira um nome para sua política (por exemplo, "Permitir inserção e leitura").
6. Selecione INSERIR e SELECIONE permissões do Operações permitidas menu suspenso.
7. Clique no Análise botão para revisar as políticas.
8. Clique no Salvar botão para adicionar a política.

Agora você deve ser capaz de fazer upload de imagens sem gerar um erro de acesso.

Servindo as imagens carregadas em seu aplicativo

Para exibir a imagem em seu site, você precisa de um URL público, que pode ser recuperado de duas maneiras diferentes.

Você pode usar o cliente Supabase assim:

const caminho do arquivo = "path_to_file_in_buckey"
const { dados } = supabase
 .armazenar
 .de('imagens')
 .getPublicUrl(`${arquivo}`)

Ou você pode concatenar manualmente a URL do bucket com o caminho do arquivo:

const caminho do arquivo = `${bucket_url}/${arquivo}`

Use o método que preferir. Assim que tiver o caminho do arquivo, você pode usá-lo no componente de imagem Next.js assim:

"" largura={200} altura={200}/>

Este código exibirá a imagem em seu site.

Criando aplicativos robustos com o Supabase

Usando este código, você pode aceitar um arquivo de um usuário por meio de um formulário e carregá-lo no armazenamento do Supabase. Você pode recuperar essa imagem e exibi-la em seu site.

Além de armazenar imagens, o Supabase possui outras funcionalidades. Você pode criar um banco de dados PostgreSQL, escrever funções de borda e configurar autenticação para seus usuários.