Диалоговое окно выбора файла из Битрикс24.Диск

В Битрикс24 для разработчиков приложений есть несколько стандартных системных диалогов, которые можно вызывать через REST API в своих собственных приложениях. Например, выбор пользователя или сущностей в CRM.

Делая в Twin px статическое приложение для проверки электронной подписи в PDF-документах для Битрикс24, мы столкнулись с отсутствием важного диалога выбора файла из Битрикс24.Диск. Точнее, он имеется в системе, но у разработчиков нет к нему доступа через штатный REST API, только к «низкоуровневым» функциям для работы с Битрикс24.Диск.

В сети на форумах разработчиков можно найти периодические обращения к 1C-Битрикс с просьбой реализации доступа к этому диалогу. Но до сих пор эти просьбы не были выполнены. Готовых сторонних решений мы тоже не нашли.

Наша задача состояла в том, чтобы полностью повторить дизайн системного диалога выбора файла из Битрикс24.Диск, т.е. мимикрировать под него.

Вот пример стандартного системного диалога выбора файла:

Пример стандартного системного диалога выбора файла в Битрикс24.

Для реализации задачи мы использовали Vue.js. Использовать наше решение очень просто. Показываете диалоговое окно:

<script>

(function() {

var js = ['//api.bitrix24.com/api/v1/', 'popup/chunk-vendors.bx24-popup.js', 'popup/app.bx24-popup.js'];

var css = ['popup/app.bx24-popup.css'];

var p=document.createElement("div");p.id="BXPopupWindow",document.body.prepend(p),js.forEach(function(e){var n=document.createElement("script");n.src=e,document.body.append(n)}),css.forEach(function(e){var n=document.createElement("link");n.rel="stylesheet",n.href=e,document.head.append(n)});

}());

</script>

Здесь в переменных js и css перечислены пути к подключаемым файлам. Для элемента, который должен вызывать показ диалогового окна, устанавливаете атрибут id=”BXPopupWindowShowButton”. Подключение готово, теперь при нажатии на этот элемент будет всплывать окно для навигации по папкам внутри Диска и выбора файла.

После нажатия на кнопку «Выбрать документ» внутри диалогового окна сработает событие bx.popup.window.download. Для его обработки и дальнейшей работы с файлом на странице подключаем скрипт:

<script>
window.addEventListener('load', () => {
document
.getElementById('BXPopupWindowShowButton')
.addEventListener('bx.popup.window.download', (e) => {
//выводим путь для скачивания файла в консоль
console.log(e.detail.files);
});
});
</script>

Обработчик получит объект со ссылкой на выбранный файл для дальнейшего оперирования им внутри приложения:

Вы можете использовать наше решение в своих проектах программ для Битрикс24 при необходимости. Мы не делали решение универсальным и гибким, т.е. вам придётся самостоятельно изменить в коде модуля некоторые вещи под ваши задачи.

Исходный код проекта диалогового окна выбора файла вы можете скачать на Bitbucket.

Для полноценной работы модуля приложению, которое его использует, нужны права Битрикс24 — Диск и Пользователи (минимальные).

Пример использования нашего решения в программе проверки ЭП в PDF-документах для Битрикс24:

Пример использования окна для выбора файлов на Битрикс24. Диск в решение «Проверка подписи».

Пример использования диалогового окна, разработанного нами.

P.S.

Обязательно пишите в комментариях, если это решение и статья были полезны для вас. Обратная связь мотивирует нас на продолжение публикации полезных заметок.