Le stockage cloud est devenu une solution essentielle pour les entreprises, les développeurs et les chercheurs en raison de sa fiabilité, de son évolutivité et de sa sécurité. Dans le cadre d'un projet de recherche, j'ai récemment intégré l'API Dropbox dans l'une de mes applications React, améliorant ainsi la façon dont nous gérons le stockage cloud.

Dans cet article de blog, je vais vous guider tout au long du processus d'intégration, en vous fournissant des instructions claires et les meilleures pratiques pour vous aider à intégrer avec succès l'API Dropbox dans vos applications React.

Configuration de l'environnement Dropbox

La première étape pour utiliser Dropbox dans votre application React consiste à configurer une application Dropbox dédiée. Ce processus nous donnera un accès applicatif à l'API de Dropbox et lui permettra d'interagir avec Dropbox par programme.

1 — Création d'une application Dropbox

Nous devons créer une application Dropbox via le portail des développeurs Dropbox. Voici comment :

• Création d'un compte : Si vous n'en avez pas déjà un, créez un compte Dropbox. Accédez ensuite au portail des développeurs Dropbox.

• Création d'application : Cliquez sur Créer une application et sélectionnez les autorisations d'application souhaitées. Dans la plupart des cas d'utilisation, la sélection de l'accès « Full Dropbox » permet à votre application de gérer les fichiers sur l'ensemble du compte Dropbox.

• Configuration : Nommez votre application et configurez les paramètres en fonction des besoins de votre projet. Cela inclut la spécification des autorisations API et la définition des niveaux d'accès.

• Génération de jeton d'accès : Après avoir créé l'application, générez un jeton d'accès. Ce jeton permettra à votre application React de s'authentifier et d'interagir avec Dropbox sans avoir besoin d'une connexion utilisateur à chaque fois.

Intégrer Dropbox dans notre application React

Maintenant que l'application Dropbox est prête, passons au processus d'intégration.

2 — Installation du SDK Dropbox

Tout d'abord, nous devons installer le SDK Dropbox, qui fournit les outils permettant d'interagir avec Dropbox via votre application React. Dans le répertoire de votre projet, exécutez ce qui suit :

npm install dropbox

Il ajoutera le SDK Dropbox en tant que dépendance à votre projet.

3 — Configuration des variables d'environnement

Pour des raisons de sécurité, nous devons éviter de coder en dur les informations sensibles telles que votre jeton d'accès Dropbox. Au lieu de cela, stockez-le dans une variable d'environnement. À la racine de votre projet React, créez un fichier .env et ajoutez ce qui suit :

REACT_APP_DROPBOX_ACCESS_TOKEN=your_dropbox_access_token_here

4 — Configuration du client Dropbox dans React

Une fois les variables d'environnement définies, initialisez Dropbox dans votre application React en important le SDK et en créant une instance client Dropbox. Voici un exemple de configuration de l'API Dropbox :

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

Télécharger des fichiers sur Dropbox

Vous pouvez désormais télécharger des fichiers directement depuis votre application React avec Dropbox intégré. Voici comment mettre en œuvre les téléchargements de fichiers :

5 — Exemple de téléchargement de fichier

  /**
  * 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 — Implémentation du téléchargement de fichiers dans l'interface utilisateur

Vous pouvez désormais lier la fonction de téléchargement à une entrée de fichier dans votre application React :

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

return (
  

    
);

Récupérer des fichiers depuis Dropbox

Nous aurons souvent besoin de récupérer et d'afficher des fichiers depuis Dropbox. Voici comment récupérer un fichier :

7 — Récupération et affichage de fichiers

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 — Liste des fichiers et des dossiers dans Dropbox

L'une des fonctionnalités clés que nous avons intégrées était la possibilité de répertorier les dossiers et les fichiers des répertoires Dropbox. Voici comment nous avons procédé :

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 — Affichage du fichier dans React

Vous pouvez afficher une image ou une vidéo en utilisant le lien de téléchargement récupéré :

    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;

Gestion des réponses des utilisateurs

Dropbox a également été utilisé pour stocker les réponses des utilisateurs à des enquêtes ou des formulaires de commentaires dans le cadre Huldra. Voici comment nous avons géré le stockage et la gestion des réponses des utilisateurs.

10 — Stockage des réponses

Nous capturons les réponses des utilisateurs et les stockons dans Dropbox tout en veillant à ce que la structure des répertoires soit organisée et facile à gérer.

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 — Récupération des réponses pour analyse

Lorsque nous devons récupérer des réponses pour analyse, nous pouvons utiliser l'API Dropbox pour les répertorier et les télécharger :

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);
    }
};

Ce code répertorie tous les fichiers du répertoire /dev/responses/, ce qui facilite la récupération et l'analyse des commentaires des utilisateurs.

 ? Avant de vous lancer :

 ? Vous avez trouvé ce guide sur l'intégration de l'API Dropbox avec React utile ? Donnez un coup de pouce !
? Vous avez déjà utilisé l'API Dropbox dans votre projet ? Partagez votre expérience dans les commentaires !
? Vous connaissez quelqu’un qui cherche à améliorer son application React ? Faites passer le mot et partagez cette publication !

 ? Votre soutien nous aide à créer un contenu plus perspicace !

Supportez nos informations techniques