El almacenamiento en la nube se ha convertido en una solución esencial para empresas, desarrolladores e investigadores debido a su confiabilidad, escalabilidad y seguridad. Como parte de un proyecto de investigación, recientemente integré la API de Dropbox en una de mis aplicaciones React, mejorando la forma en que manejamos el almacenamiento en la nube.

En esta publicación de blog, lo guiaré a través del proceso de integración, brindándole instrucciones claras y mejores prácticas para ayudarlo a integrar exitosamente la API de Dropbox en sus aplicaciones React.

Configurar el entorno de Dropbox

El primer paso para usar Dropbox en tu aplicación React es configurar una aplicación de Dropbox dedicada. Este proceso nos dará acceso a la aplicación a la API de Dropbox y le permitirá interactuar con Dropbox mediante programación.

1 - Crear una aplicación de Dropbox

Necesitamos crear una aplicación de Dropbox a través del Portal para desarrolladores de Dropbox. Así es como:

• Creación de cuenta: Si aún no tienes una, crea una cuenta de Dropbox. Luego, navega hasta el Portal para desarrolladores de Dropbox.

• Creación de aplicaciones: Haga clic en Crear aplicación y seleccione los permisos de la aplicación que desee. Para la mayoría de los casos de uso, seleccionar el acceso “Full Dropbox” permite que tu aplicación administre archivos en toda la cuenta de Dropbox.

• Configuración: Asigne un nombre a su aplicación y configure los ajustes según las necesidades de su proyecto. Esto incluye especificar permisos de API y definir niveles de acceso.

• Generación de token de acceso: Después de crear la aplicación, genere un token de acceso. Este token permitirá que tu aplicación React se autentique e interactúe con Dropbox sin necesidad de que un usuario inicie sesión cada vez.

Integrando Dropbox en nuestra aplicación React

Ahora que la aplicación de Dropbox está lista, pasemos al proceso de integración.

2 — Instalación del SDK de Dropbox

Primero, necesitamos instalar el SDK de Dropbox, que proporciona las herramientas para interactuar con Dropbox a través de su aplicación React. En el directorio de su proyecto, ejecute lo siguiente:

npm install dropbox

Agregará el SDK de Dropbox como una dependencia a tu proyecto.

3 — Configuración de variables de entorno

Por razones de seguridad, debemos evitar codificar información confidencial, como su token de acceso a Dropbox. En su lugar, guárdelo en una variable de entorno. En la raíz de su proyecto React, cree un archivo .env y agregue lo siguiente:

REACT_APP_DROPBOX_ACCESS_TOKEN=your_dropbox_access_token_here

4 — Configurar el cliente de Dropbox en React

Una vez configuradas las variables de entorno, inicializa Dropbox en tu aplicación React importando el SDK y creando una instancia de cliente de Dropbox. A continuación se muestra un ejemplo de configuración de la API de Dropbox:

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

Subir archivos a Dropbox

Ahora puedes cargar archivos directamente desde tu aplicación React con Dropbox integrado. A continuación se explica cómo implementar la carga de archivos:

5 — Ejemplo de carga de archivos

  /**
  * 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: Implementación de la carga de archivos en la interfaz de usuario

Ahora puedes vincular la función de carga a una entrada de archivo en tu aplicación React:

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

return (
  

    
  
);

Recuperar archivos de Dropbox

A menudo necesitaremos buscar y mostrar archivos de Dropbox. A continuación se explica cómo recuperar un archivo:

7 — Obteniendo y mostrando archivos

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 — Listado de archivos y carpetas en Dropbox

Una de las características clave que integramos fue la capacidad de enumerar carpetas y archivos de los directorios de Dropbox. Así es como lo hicimos:

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 - Mostrar el archivo en React

Puedes mostrar una imagen o un vídeo utilizando el enlace de descarga obtenido:

    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;

Manejo de las respuestas de los usuarios

Dropbox también se utilizó para almacenar las respuestas de los usuarios de encuestas o formularios de comentarios dentro del marco de Huldra. Así es como manejamos el almacenamiento y la administración de las respuestas de los usuarios.

10 - Almacenamiento de respuestas

Capturamos las respuestas de los usuarios y las almacenamos en Dropbox mientras garantizamos que la estructura del directorio esté organizada y sea fácil de administrar.

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 — Recuperar respuestas para análisis

Cuando necesitamos recuperar respuestas para analizarlas, podemos usar la API de Dropbox para enumerarlas y descargarlas:

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 enumera todos los archivos en el directorio /dev/responses/, lo que facilita la búsqueda y el análisis de los comentarios de los usuarios.

? Antes de sumergirte:

? ¿Le resultó útil esta guía sobre la integración de la API de Dropbox con React? ¡Dale el visto bueno!
? ¿Ya usaste la API de Dropbox en tu proyecto? ¡Comparte tu experiencia en los comentarios!
? ¿Conoce a alguien que esté buscando mejorar su aplicación React? ¡Corre la voz y comparte esta publicación!

? ¡Tu apoyo nos ayuda a crear contenido más revelador!

Apoye nuestros conocimientos técnicos