Простые шаги для синхронизации Google Диска с файловым менеджером JS 2

Диспетчер файлов — это компонент, аналогичный проводнику Windows, который позволяет пользователям эффективно управлять, просматривать, загружать и загружать файлы.

В этом блоге объясняются простые шаги по синхронизации вашего Диска Google с Файловым менеджером Essential JS 2, а также по загрузке, загрузке и предварительному просмотру изображений в нем.

Начиная

Чтобы получить доступ к файлам с Google Диска, нам нужен поставщик файлов Google Диска, который представляет собой интерфейс между Google Диском и нашим файловым менеджером. Это помогает в управлении файлами в хранилище Google Диска.

Клонируйте ej2-google-drive-aspcore-file-provider, используя следующую команду.

git clone https://github.com/SyncfusionExamples/ej2-google-drive-aspcore-file-provider ej2-google-drive-aspcore-file-provider

cd ej2-google-drive-aspcore-file-provider

Для запуска службы Google Drive нам нужен файл client_secrect.json. Этот файл должен быть сгенерирован из API-интерфейса Google Диска, который помогает получить доступ к файлам из хранилища. Пожалуйста, выполните следующие шаги, чтобы создать этот файл json.

Сгенерировать client_secrect.json

Войдите в https://console.cloud.google.com/.
Нажмите кнопку раскрывающегося списка и выберите НОВЫЙ ПРОЕКТ.

3. Введите название проекта и нажмите СОЗДАТЬ.

4. Созданный проект будет отображаться в уведомлениях. Выберите VIEW, чтобы открыть его.

5. На левой странице выберите API и службы > Библиотека,

Найдите API Google Диска и выберите его. Затем выберите Включить.

6. Выберите API & Services-› Экран согласия OAuth, укажите имя приложения и нажмите Сохранить.

7. Теперь на левой панели выберите Учетные данные, нажмите СОЗДАТЬ Учетные данные и выберите Идентификатор клиента OAuth.

Выберите веб-приложение в качестве типа приложения, дайте ему имя и нажмите СОЗДАТЬ.

Будет создан клиент OAuth, и отобразятся идентификатор клиента и секрет клиента. Нажмите ОК.

8. Теперь будут перечислены идентификаторы клиентов OAuth. Выберите Загрузить и сохраните его.

После создания секретных данных клиента скопируйте данные JSON в следующие указанные файлы JSON в расположении клонированного проекта.

EJ2FileManagerService › учетные данные › client_secret.json

GoogleOAuth2.0Base › учетные данные › client_secret.json

Запуск приложения

После клонирования откройте файл решения в Visual Studio. Соберите проект и запустите его после восстановления пакетов NuGet.

Теперь сервисный проект готов к использованию. Затем создайте базовый пример файлового менеджера JavaScript, обратившись к документации по началу работы. Вы также можете получить работающий и предварительно настроенный пример из этого репозитория GitHub.

Файловый менеджер AjaxSettings

Чтобы выполнить основные действия с файлами, такие как чтение, удаление, копирование, перемещение, переименование и поиск, а также получить сведения о файлах из службы Google Диска, начните сопоставлять следующие URL-адреса службы со свойством ajaxSettings. файлового менеджера.

Здесь hostUrl будет вашим локальным номером порта.

var hostUrl = http://localhost:62870/; 
ajaxSettings: {
 url: hostUrl + 'api/GoogleDriveProvider/GoogleDriveFileOperations' }

Загрузка файла

Чтобы выполнить операцию загрузки, инициализируйте свойство downloadUrl в ajaxSettings компонента File Manager.

var hostUrl = http://localhost:62870/; 
ajaxSettings: {
 url: hostUrl + 'api/GoogleDriveProvider/GoogleDriveFileOperations',
 downloadUrl: hostUrl +'api/GoogleDriveProvider/GoogleDriveDownload' }

Файл загружен

Чтобы выполнить операцию загрузки, инициализируйте свойство uploadUrl в ajaxSettings компонента File Manager.

var hostUrl = http://localhost:62870/;
ajaxSettings: {
 url: hostUrl + 'api/GoogleDriveProvider/GoogleDriveFileOperations',
 uploadUrl: hostUrl +'api/GoogleDriveProvider/GoogleDriveUpload' 
}

Предварительный просмотр изображения файла

Чтобы выполнить предварительный просмотр изображения, инициализируйте свойство getImageUrl в ajaxSettings компонента File Manager.

var hostUrl = http://localhost:62870/;
ajaxSettings: {
 url: hostUrl + 'api/GoogleDriveProvider/GoogleDriveFileOperations',
 getImageUrl: hostUrl +'api/GoogleDriveProvider/GoogleDriveGetImage' }

Вывод

В этом блоге мы узнали, как настроить Google Диск с компонентом Файловый менеджер. Попробуйте сами и управляйте своими файлами и изображениями на Google Диске с помощью пользовательского интерфейса по вашему выбору, настроив файловый менеджер.

Если вы уже являетесь пользователем Syncfusion, вы можете загрузить установку продукта с нашего веб-сайта. В противном случае вы можете скачать бесплатную 30-дневную пробную версию здесь.

Если вы хотите отправить нам отзыв, пожалуйста, используйте раздел комментариев ниже. Если вы хотите задать какие-либо вопросы, свяжитесь с нами через наш форум поддержки, Direct-Trac или портал обратной связи. Мы всегда рады Вам помочь!

Первоначально опубликовано на https://www.syncfusion.com 26 июня 2020 г.

Простые шаги для синхронизации Google Диска с файловым менеджером JS 2