В CMS Bitrix имеется довольно неплохой по функциональным возможностям и дизайну встроенный графический редактор картинок.
Поэтому может возникнуть желании использовать его на сайте. Но как это сделать? На самом деле это не так сложно. Класс компонента графического редактора является \Bitrix\Main\UI\FileInput и располагается в файле /bitrix/modules/main/lib/ui/fileinput.php
Для вывода кода компонента необходимо создать экземляр класс с помощью статического метода createInstance. Затем получить код на вывод через метод show. Полный код вызова компонента будет иметь следующий вид:
<?=\Bitrix\Main\UI\FileInput::createInstance([
"name" => "picture",
"description" => true,
"upload" => true,
"allowUpload" => "I",
"medialib" => true,
"fileDialog" => true,
"cloud" => true,
"delete" => true,
"maxCount" => 1
])->show($id);
?>Переменная $id содержит идентификатор картинки в системе.
Параметры:
- name – задаёт параметр формы, в котором будут переданы данные файла;
- description – можно ли задавать описание к файлу;
- upload – можно ли загружать файл;
- allowUpload – какой тип файлов разрешён к загрузке (F – файлы, I – картинки, A – все типы, по умолчанию);
- allowUploadExt – какие типы расширений разрешены к загрузке (*.zip,*.rar,*.doc и пр.);
- medialib – можно ли использовать медиа-библиотеку;
- fileDialog – разрешён ли файловый диалог для загрузки;
- cloud – использовать ли модуль облачного хранилища для загрузки файлов;
- delete – можно ли удалять картинку;
- edit – можно ли редактировать картинку:
- maxCount – максимальное количество файлов;
- maxSize – максимальный размер файла (байт).
Также необходимо учитывать, что некоторые параметры будут работать только при определённых условиях, как, например, medialib и cloud.
Завершение интеграции
После вывода компонента важно не забыть обработать результат формы: сохранить ID файла, проверить тип загруженного файла и права пользователя. Сам редактор решает задачу интерфейса, но безопасность и привязка к сущности остаются на стороне вашего кода.
В параметрах компонента отдельно проверьте allowUpload, medialib, fileDialog, cloud, delete, edit и maxCount. Не все параметры будут иметь эффект в любой установке Bitrix: часть зависит от подключённых модулей, прав пользователя и контекста страницы.
$fileId = (int)$_POST['picture'];
if ($fileId > 0) {
$file = CFile::GetFileArray($fileId);
if ($file && str_starts_with($file['CONTENT_TYPE'], 'image/')) {
// сохраняем ID картинки в своей сущности
}
}Если редактор не открывается, проверьте подключение модулей main и fileman, права на загрузку, административные JS-расширения и наличие сессии пользователя. В публичной части сайта проблема часто оказывается не в FileInput, а в том, что на странице не подключены нужные скрипты Bitrix.
Рабочая схема такая: выводим FileInput, разрешаем только картинки, ограничиваем количество, после отправки формы валидируем ID файла и сохраняем его в свою сущность. Тогда встроенный редактор становится нормальной частью формы, а не просто красивой кнопкой загрузки.