Bitrix API. Вставка на страницу встроенного редактора картинок

В Bitrix можно использовать готовый интерфейс выбора и загрузки изображений вместо собственной формы. Заметка 2018 года посвящена \Bitrix\Main\UI\FileInput: класс формирует контрол, а обработка сохранения файла остаётся задачей приложения.

Вывод контрола

Пример выполняется в окружении Bitrix после подключения пролога. Переменная $id — идентификатор уже сохранённого файла; для нового изображения можно передать пустое значение в формате, который поддерживает установленная версия ядра.

Поле изображения Bitrix с превью, кнопками выбора файла и редактирования — Элемент выбора изображения в форме Bitrix: превью и кнопки управления.

<?php
// $id получен из записи, которую пользователь вправе редактировать.
echo \Bitrix\Main\UI\FileInput::createInstance([
    'name' => 'picture',
    'description' => true,
    'upload' => true,
    'allowUpload' => 'I',
    'medialib' => false,
    'fileDialog' => false,
    'cloud' => false,
    'delete' => true,
    'edit' => true,
    'maxCount' => 1,
    'maxSize' => 5 * 1024 * 1024,
])->show($id);
?>

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

Параметры, которые влияют на поведение

name — имя поля формы; оно должно совпадать с именем, которое читает обработчик.
description — возможность вводить описание файла.
upload — загрузка с компьютера.
allowUpload — I для изображений, F для списка расширений, A для произвольных файлов.
allowUploadExt — список разрешённых расширений при выборе режима F; формат уточняйте для версии ядра.
medialib, fileDialog, cloud — дополнительные источники выбора.
delete и edit — элементы управления удалением и редактированием.
maxCount — количество файлов; здесь разрешён один.
maxSize — ограничение размера в байтах; здесь пять мебибайт.

Контрол не заменяет обработчик загрузки

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

FileInput выводит контрол выбора и редактирования; отправленное поле picture обрабатывается сервером отдельно — Схема работы FileInput. Отображение контрола и сохранение файла — разные этапы.

Основной контракт класса, его источники и метод show приведены в справочнике FileInput.