Как реализовать выбор и загрузку файлов через HTML-поле в мобильном клиенте 1С?

Программист 1С v8.3 (Управляемые формы) IT и автоматизация бизнеса
← На главную

При разработке современных интерфейсов на платформе 1С:Предприятие, особенно когда речь идет о мобильном клиенте, разработчики часто прибегают к использованию поля HTML-документа. Это позволяет создавать гибкие и красивые интерфейсы, такие как чаты, дашборды или кастомные формы ввода. Однако при попытке реализовать стандартную загрузку файлов через HTML-тег input type="file" многие сталкиваются с тем, что кнопка выбора файла просто не реагирует на нажатие. В этой статье мы разберем, почему это происходит, и проанализируем, как правильно организовать работу с файлами в мобильной среде.

Выясним причину: почему стандартный механизм не работает?

Для начала проанализируем ситуацию с точки зрения архитектуры мобильной платформы. Поле HTML-документа в мобильном клиенте использует встроенные системные компоненты: WebView для ОС Android и WKWebView для iOS. Несмотря на то, что это полноценные браузерные движки, они работают внутри защищенного контейнера приложения 1С.

Когда в обычном браузере нажимается кнопка выбора файла, операционная система получает запрос на открытие диалогового окна. В случае с мобильным клиентом 1С, разработчики платформы сознательно ограничивают проброс этих событий (например, обработчик onShowFileChooser в Android) из соображений безопасности и контроля над файловой системой. Более того, политика безопасности Apple в отношении WKWebView запрещает доступ веб-контента к локальным ресурсам устройства без явного посредничества основного приложения. Поэтому попытка использовать «чистый» HTML для работы с файловой системой в мобильном клиенте всегда будет приводить к отсутствию реакции интерфейса.

Решение проблемы: создание «моста» между JS и 1С

Рассмотрим основной способ решения задачи — использование механизма JS-Bridge. Суть метода заключается в том, что мы не пытаемся заставить HTML работать самостоятельно, а делегируем задачу выбора файла встроенному языку 1С. Разберем этот процесс по шагам.

Шаг 1. Подготовка HTML-кода

Вместо стандартного тега выбора файла мы создадим обычную кнопку или ссылку, которая будет инициировать событие в JavaScript. Для передачи управления в 1С можно использовать схему навигации или метод оповещения.

Рассмотрим пример функции JavaScript, которая будет вызываться при нажатии на кнопку «Прикрепить файл»:


function selectFile() {
    // Вариант 1: Использование специальной ссылки, которую перехватит 1С
    window.location.href = "v8action://selectFile";
    
    // Вариант 2: Использование штатного метода оповещения (если поддерживается контекстом)
    // window.external.notification("selectFileRequested");
}

Шаг 2. Перехват события на стороне 1С

Теперь проанализируем, как обработать это нажатие в управляемой форме 1С. Для этого нам понадобится событие ПриНажатии (или ПриИзменении в зависимости от метода) поля HTML-документа.


&НаКлиенте
Процедура ПолеHTMLДокументаПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
    
    // Проверяем, что нажата именно наша ссылка
    Если Найти(ДанныеСобытия.Href, "v8action://selectFile") > 0 Тогда
        СтандартнаяОбработка = Ложь; // Отменяем переход по ссылке в браузере
        ВыполнитьВыборФайла(); // Вызываем штатный диалог 1С
    КонецЕсли;
    
КонецПроцедуры

Использование штатных средств 1С для работы с файлами

Разберем подробнее, как должна работать процедура ВыполнитьВыборФайла(). Поскольку мы находимся в мобильном клиенте, нам важно использовать асинхронные методы и учитывать особенности мобильной ОС.

Для выбора изображений или видео наиболее эффективно использовать объект СредстваМультимедиа, так как он предоставляет прямой доступ к камере и галерее:


&НаКлиенте
Процедура ВыполнитьВыборФайла()
    
    // Проверяем поддержку мультимедиа на устройстве
    Если СредстваМультимедиа.ПоддерживаетсяВыборИзображений() Тогда
        
        ОписаниеОповещения = Новый ОписаниеОповещения("ПослеВыбораФайла", ЭтотОбъект);
        СредстваМультимедиа.НачатьВыборИзображения(ОписаниеОповещения);
        
    Иначе
        // Если это не изображение, используем стандартный диалог выбора файла
        ПараметрыДиалога = Новый ПараметрыДиалогаПомещенияФайлов;
        НачатьПомещениеФайлаНаСервер(,,, ПараметрыДиалога, УникальныйИдентификатор);
    КонецЕсли;
    
КонецПроцедуры

Передача данных обратно в HTML-интерфейс

После того как файл выбран средствами 1С и помещен во временное хранилище, нам нужно отобразить его в нашем HTML-чате или форме. Здесь кроется важный нюанс: передача «тяжелых» данных.

Проанализируем проблему памяти: если мы попытаемся конвертировать файл (например, фото 10 Мб) в строку Base64 и передать её обратно в HTML через выполнение скрипта, мобильное приложение может аварийно завершиться из-за нехватки оперативной памяти. Это особенно актуально для iOS.

Рекомендуемый алгоритм действий:

  1. Выбираем файл с помощью НачатьПомещениеФайлаНаСервер.
  2. На сервере получаем ДвоичныеДанные файла.
  3. Сохраняем файл в ИБ или во временное хранилище, доступное по ссылке.
  4. Передаем в JavaScript-код HTML-документа только ссылку на файл или его миниатюру.
  5. В JavaScript обновляем DOM-дерево, добавляя элемент img src="ссылка".

Пример возврата данных в HTML через вызов функции JS:


&НаКлиенте
Процедура ПослеВыбораФайла(Результат, ДополнительныеПараметры) Экспорт
    
    Если Результат = Неопределено Тогда
        Возврат;
    КонецЕсли;
    
    // Получаем адрес временного хранилища
    АдресФайла = Результат.Адрес;
    
    // Формируем вызов функции JS, которая добавит картинку в интерфейс
    ТекстСкрипта = "addMessageWithImage('" + АдресФайла + "');";
    Элементы.ПолеHTMLДокумента.Документ.parentWindow.eval(ТекстСкрипта);
    
КонецПроцедуры

Важные настройки разрешений

Важно помнить, что даже самый правильный код не сработает, если у приложения нет прав на доступ к ресурсам устройства. При сборке мобильного клиента в Сборщике мобильных приложений необходимо обязательно проверить наличие следующих разрешений (галочек):

Без этих разрешений методы СредстваМультимедиа и диалоги выбора файлов будут возвращать пустой результат или вызывать системную ошибку доступа.

Резюме

Мы рассмотрели, почему стандартные HTML-механизмы загрузки файлов не работают в мобильном клиенте 1С, и проанализировали эффективный путь обхода этого ограничения. Использование взаимодействия через v8action или window.external.notification позволяет сохранить гибкость веб-интерфейса, используя при этом надежность и безопасность нативных методов платформы 1С:Предприятие 8.3. Такой подход гарантирует стабильную работу приложения на обеих популярных мобильных операционных системах — Android и iOS. Практический пример реализации подобного веб-интерфейса можно изучить в конфигурации мобильного учёта на базе HTML-поля.

← На главную