O armazenamento em nuvem se tornou uma solução essencial para empresas, desenvolvedores e pesquisadores devido à sua confiabilidade, escalabilidade e segurança. Como parte de um projeto de pesquisa, integrei recentemente a API do Dropbox em um dos meus aplicativos React, aprimorando a forma como lidamos com o armazenamento em nuvem.

Nesta postagem do blog, orientarei você pelo processo de integração, fornecendo instruções claras e práticas recomendadas para ajudá-lo a integrar com sucesso a API do Dropbox em seus aplicativos React.

Configurando o ambiente Dropbox

A primeira etapa para usar o Dropbox em seu aplicativo React é configurar um aplicativo Dropbox dedicado. Este processo nos dará acesso ao aplicativo à API do Dropbox e permitirá que ele interaja com o Dropbox programaticamente.

1 — Criando um aplicativo Dropbox

Precisamos criar um aplicativo Dropbox por meio do Dropbox Developer Portal. Veja como:

• Criação de conta: Se você ainda não tem uma, crie uma conta do Dropbox. Em seguida, navegue até o Portal do desenvolvedor do Dropbox.

• Criação de aplicativo: Clique em Criar aplicativo e selecione as permissões de aplicativo desejadas. Para a maioria dos casos de uso, selecionar o acesso “Dropbox completo” permite que seu aplicativo gerencie arquivos em toda a conta do Dropbox.

• Configuração: Nomeie seu aplicativo e defina as configurações de acordo com as necessidades do seu projeto. Isso inclui especificar permissões de API e definir níveis de acesso.

• Geração de token de acesso: Após criar o aplicativo, gere um token de acesso. Este token permitirá que seu aplicativo React se autentique e interaja com o Dropbox sem precisar de login de usuário todas as vezes.

Integrando o Dropbox em nosso aplicativo React

Agora que o aplicativo Dropbox está pronto, vamos prosseguir para o processo de integração.

2 — Instalando o SDK do Dropbox

Primeiro, precisamos instalar o SDK do Dropbox, que fornece as ferramentas para interagir com o Dropbox por meio do seu aplicativo React. No diretório do seu projeto, execute o seguinte:

npm install dropbox

Isso adicionará o SDK do Dropbox como uma dependência ao seu projeto.

3 — Configurando variáveis ​​de ambiente

Por motivos de segurança, devemos evitar codificar informações confidenciais, como seu token de acesso do Dropbox. Em vez disso, armazene-o em uma variável de ambiente. Na raiz do seu projeto React, crie um arquivo .env e adicione o seguinte:

REACT_APP_DROPBOX_ACCESS_TOKEN=your_dropbox_access_token_here

4 — Configurando o cliente Dropbox no React

Depois que as variáveis ​​de ambiente forem definidas, inicialize o Dropbox em seu aplicativo React importando o SDK e criando uma instância do cliente Dropbox. Aqui está um exemplo de configuração da API do Dropbox:

import { Dropbox } from 'dropbox';
const dbx = new Dropbox({ accessToken: process.env.REACT_APP_DROPBOX_ACCESS_TOKEN });

Fazendo upload de arquivos para o Dropbox

Agora você pode fazer upload de arquivos diretamente do seu aplicativo React com o Dropbox integrado. Veja como implementar uploads de arquivos:

5 — Exemplo de upload de arquivo

  /**
  * Uploads a file to Dropbox.
  *
  * @param {string} path - The path within Dropbox where the file should be saved.
  * @param {Blob} fileBlob - The Blob data of the file to upload.
  * @returns {Promise} A promise that resolves when the file is successfully uploaded.
  */
 const uploadFileToDropbox = async (path, fileBlob) => {
     try {
         // Append the root directory (if any) to the specified path
         const fullPath = `${REACT_APP_DROPBOX_ROOT_DIRECTORY || ""}${path}`;

         // Upload file to Dropbox
         const response = await dbx.filesUpload({
             path: fullPath,
             contents: fileBlob,
             mode: {
                 ".tag": "overwrite"
             }, // Overwrite existing files with the same name
             mute: true, // Mutes notifications for the upload
         });

         // Return a success response or handle the response as needed
         return true;
     } catch (error) {
         console.error("Error uploading file to Dropbox:", error);
         throw error; // Re-throw the error for further error handling
     }
 };

6 — Implementando upload de arquivos na UI

Agora você pode vincular a função de upload a uma entrada de arquivo em seu aplicativo React:

const handleFileUpload = (event) => {
  const file = event.target.files[0];
  uploadFileToDropbox(file);
};

return (
  

    
  
);

Recuperando arquivos do Dropbox

Muitas vezes precisaremos buscar e exibir arquivos do Dropbox. Veja como recuperar um arquivo:

7 — Buscando e exibindo arquivos

const fetchFileFromDropbox = async (filePath) => {
    try {
        const response = await dbx.filesGetTemporaryLink({
            path: filePath
        });
        return response.result.link;
    } catch (error) {
        console.error('Error fetching file from Dropbox:', error);
    }
};

8 — Listando arquivos e pastas no Dropbox

Um dos principais recursos que integramos foi a capacidade de listar pastas e arquivos dos diretórios do Dropbox. Veja como fizemos:

export const listFolders = async (path = "") => {
    try {
        const response = await dbx.filesListFolder({
            path
        });
        const folders = response.result.entries.filter(entry => entry['.tag'] === 'folder');
        return folders.map(folder => folder.name);
    } catch (error) {
        console.error('Error listing folders:', error);
    }
};

9 — Exibindo o arquivo em React

Você pode exibir uma imagem ou vídeo usando o link de download obtido:

    import React, { useEffect, useState } from 'react';
    import { Dropbox } from 'dropbox';

    // Initialize Dropbox client
    const dbx = new Dropbox({ accessToken: process.env.REACT_APP_DROPBOX_ACCESS_TOKEN });

    /**
    * Fetches a temporary download link for a file in Dropbox.
    *
    * @param {string} path - The path to the file in Dropbox.
    * @returns {Promise} A promise that resolves with the file's download URL.
     */
     const fetchFileFromDropbox = async (path) => {
      try {
        const response = await dbx.filesGetTemporaryLink({ path });
        return response.result.link;
      } catch (error) {
        console.error('Error fetching file from Dropbox:', error);
        throw error;
      }
    };

    /**
    * DropboxMediaDisplay Component:
    * Dynamically fetches and displays a media file (e.g., image, video) from Dropbox.
    *
    * @param {string} filePath - The path to the file in Dropbox to be displayed.
    */
    const DropboxMediaDisplay = ({ filePath }) => {
      const [fileLink, setFileLink] = useState(null);

      useEffect(() => {
        const fetchLink = async () => {
          if (filePath) {
            const link = await fetchFileFromDropbox(filePath);
            setFileLink(link);
          }
        };
        fetchLink();
      }, [filePath]);

      return (
        

          {fileLink ? (
          
          ) : (
          
Loading media...
          )}
        
      );
    };

    export default DropboxMediaDisplay;

Lidando com respostas do usuário

O Dropbox também foi usado para armazenar respostas de usuários em pesquisas ou formulários de feedback dentro da estrutura Huldra. Veja como lidamos com o armazenamento e o gerenciamento das respostas do usuário.

10 — Armazenando Respostas

Capturamos as respostas dos usuários e as armazenamos no Dropbox, garantindo que a estrutura de diretórios seja organizada e fácil de gerenciar.

export const storeResponse = async (response, fileName) => {
    const blob = new Blob([JSON.stringify(response)], {
        type: "application/json"
    });
    const filePath = `/dev/responses/${fileName}`;

    await uploadFileToDropbox(filePath, blob);
};

11 — Recuperando Respostas para Análise

Quando precisarmos recuperar respostas para análise, podemos usar a API do Dropbox para listá-las e baixá-las:

export const listResponses = async () => {
    try {
        const response = await dbx.filesListFolder({
            path: '/dev/responses'
        });
        return response.result.entries.map(entry => entry.name);
    } catch (error) {
        console.error('Error listing responses:', error);
    }
};

Este código lista todos os arquivos no diretório /dev/responses/, facilitando a busca e a análise do feedback do usuário.

? Antes de mergulhar:

? Este guia sobre integração da API do Dropbox com React foi útil? Dê um joinha!
? Já usou a API do Dropbox em seu projeto? Compartilhe sua experiência nos comentários!
? Conhece alguém que deseja melhorar seu aplicativo React? Divulgue e compartilhe esta postagem!

? Seu apoio nos ajuda a criar conteúdo mais esclarecedor!

Apoie nossos insights técnicos