Облачное хранилище стало важным решением для бизнеса, разработчиков и исследователей благодаря своей надежности, масштабируемости и безопасности. В рамках исследовательского проекта я недавно интегрировал Dropbox API в одно из своих приложений React, улучшив возможности управления облачным хранилищем.

В этом сообщении блога я проведу вас через процесс интеграции, предоставив четкие инструкции и лучшие практики, которые помогут вам успешно интегрировать Dropbox API в ваши приложения React.

Настройка среды Dropbox

Первый шаг к использованию Dropbox в вашем приложении React — это настройка специального приложения Dropbox. Этот процесс предоставит нам доступ приложения к API Dropbox и позволит ему программно взаимодействовать с Dropbox.

1 — Создание приложения Dropbox

Нам нужно создать приложение Dropbox через портал разработчиков Dropbox. Вот как:

• Создание учетной записи: Если у вас ее еще нет, создайте учетную запись Dropbox. Затем перейдите на портал разработчиков Dropbox.

• Создание приложения: Нажмите «Создать приложение» и выберите нужные разрешения для приложения. В большинстве случаев выбор доступа «Полный доступ к Dropbox» позволяет вашему приложению управлять файлами во всей учетной записи Dropbox.

• Конфигурация: Назовите свое приложение и настройте параметры в соответствии с потребностями вашего проекта. Сюда входит указание разрешений API и определение уровней доступа.

• Генерация токена доступа: После создания приложения сгенерируйте токен доступа. Этот токен позволит вашему приложению React аутентифицироваться и взаимодействовать с Dropbox без необходимости каждый раз входить в систему.

Интеграция Dropbox в наше приложение React

Теперь, когда приложение Dropbox готово, давайте перейдем к процессу интеграции.

2. Установка Dropbox SDK

Во-первых, нам нужно установить Dropbox SDK, который предоставляет инструменты для взаимодействия с Dropbox через ваше приложение React. В каталоге вашего проекта выполните следующее:

npm install dropbox

Это добавит Dropbox SDK в качестве зависимости к вашему проекту.

Глава 3 — Настройка переменных среды

Из соображений безопасности нам следует избегать жесткого кодирования конфиденциальной информации, такой как ваш токен доступа к Dropbox. Вместо этого сохраните его в переменной среды. В корне вашего проекта React создайте файл .env и добавьте следующее:

REACT_APP_DROPBOX_ACCESS_TOKEN=your_dropbox_access_token_here

Глава 4 — Настройка клиента Dropbox в React

После установки переменных среды инициализируйте Dropbox в своем приложении React, импортировав SDK и создав экземпляр клиента Dropbox. Вот пример настройки Dropbox API:

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

Загрузка файлов в Dropbox

Теперь вы можете загружать файлы прямо из приложения React со встроенным Dropbox. Вот как реализовать загрузку файлов:

5 — Пример загрузки файла

  /**
  * 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 — Реализация загрузки файлов в пользовательском интерфейсе

Теперь вы можете связать функцию загрузки с вводом файла в вашем приложении React:

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

return (
  

    
  
);

Получение файлов из Dropbox

Нам часто приходится получать и отображать файлы из Dropbox. Вот как получить файл:

7 — Получение и отображение файлов

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. Список файлов и папок в Dropbox

Одной из ключевых функций, которые мы интегрировали, была возможность отображать папки и файлы из каталогов Dropbox. Вот как мы это сделали:

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 — Отображение файла в React

Вы можете отобразить изображение или видео, используя полученную ссылку для скачивания:

    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;

Обработка ответов пользователей

Dropbox также использовался для хранения ответов пользователей из опросов или форм обратной связи в рамках Huldra. Вот как мы храним ответы пользователей и управляем ими.

10 — Сохранение ответов

Мы собираем ответы пользователей и сохраняем их в Dropbox, обеспечивая при этом структуру каталогов организованную и простую в управлении.

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 — Получение ответов для анализа

Когда нам нужно получить ответы для анализа, мы можем использовать Dropbox API, чтобы составить их список и загрузить:

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

Этот код выводит список всех файлов в каталоге /dev/responses/, что упрощает получение и анализ отзывов пользователей.

? Прежде чем приступить к делу:

? Нашли это руководство по интеграции Dropbox API с React полезным? Поставьте палец вверх!
? Уже используете Dropbox API в своем проекте? Поделитесь своим опытом в комментариях!
? Знаете кого-нибудь, кто хочет улучшить свое приложение React? Распространите информацию и поделитесь этим постом!

? Ваша поддержка помогает нам создавать более содержательный контент!

Поддержите нашу техническую информацию