Bitrix main file input

Дрёмин Станислав

Дата последнего входа: сегодня в 16:57
Город: Москва

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

А вот описания к нему я не нашел. Восполним пробел.

Компонент называется main.file.input и лежит в системных компонентах. Все что он умеет — это загружать и сохранять файлы через CFile::SaveFile(), удалять через CFile::Delete() и все. Файлы по дефолту привязываются к главному модулю main и сохраняются в одноименной папке относительно /upload. Сам компонент возвращает некий универсальный идентификатор. Без него невозможна работа callback-ов при загрузки файла и после.

Сценарий работы компонента
Все основные js-функции лежат в script.js. При загрузке страницы формируется js-объект с заданными параметрами (это происходит в шаблоне). Далее, либо при загрузке страницы, либо по событию (клик, аякс-загрузка контента, ховер и пр.) срабатывают кастомные js-события, они вызывают функции, которые открывают нужные дивы и таблицы, ибо, по дефолту они скрыты. При этом срабатывает функция window.BlogBFileDialogUploader.prototype.GetUploadFileName, которая формирует форму для отправки файла и фрейм.

При отправке формы срабатывает window.BlogBFileDialogUploader.prototype.CallSubmit, которая отправляет файл. По дефолту файл отправляется на ту страницу, на которой находится сам компонент. Путь берется из параметра this.uploadFileUrl, а он из параметров при создании объекта. При случае можно менять на какой угодно. В общем и целом, лучше чтоб файл загружался на страницу, где находится компонент, потому как в самом компоненте идет проверка основных параметров и там формируется объект для работы с callback-ами. Без него у вас файл может загрузиться и сохраниться нормально, но индикатор загрузки зависнет, как будто файл не загрузился и процесс завис. Но обо всем по порядку.

Пользование компонента.
Вызываем компонент:

Параметры:
INPUT_NAME // уникальный name инпута, без него выдает ошибку
MULTIPLE => Y || N — позволяет или не позволяет множественную загрузку
MODULE_ID => main || iblock || blog || forum и пр. имя модуля, к которому файл привязан будет и в какую папку попадет относительно upload.
MAX_FILE_SIZE // максимальный размер файла (вроде в байтах)
ALLOW_UPLOAD A || F || I — какой тип файлов будем грузить: F — файлы, I — картинки, A — все подряд.
ALLOW_UPLOAD_EXT => «*.zip,*.rar,*.doc и пр.» // какие расширения файлов можно грузить. Работает если ALLOW_UPLOAD => F

Шаблон компонента всяко придется править, так что можно сразу копировать в шаблон .default. при этом в самом шаблоне поправьте пути к js и css файлам, которые грузятся по средствам js-функций.

После этого на странице вы не увидите ничего Для этого надо в шаблоне избавиться от некоторых мало понятных проверок и функции.

Убираем php-вставки в скрипте, в шаблоне, примерно строки 117, 154 и 171. Тут идет проверка php — callback — функции, в момент загрузки страницы, она пустая и компонент скрыт. Активируется после перетаскивания файла в дропзону. После этого компонент нормально отображается на странице при ее загрузке.

Сам загрузчик формируется объектом:

Если посмотреть функцию window.BlogBFileDialogUploader.prototype.CreateElements — там формируется фрейм и форма для отправки файла. Если нужно вместе с файлом передать еще какие-либо параметры, то добавляем свои инпуты.

window.BlogBFileDialogUploader.prototype.Callback — срабатывает после загрузки и содержит массив с инфой о файле. Сюда можно впихнуть все что получится в $arResult. С этим массивом можно работать и использовать дальше после загрузки.

При использовании компонента в режиме ajax — т.е. при загрузке компонента на страницу или в popup-окно с помощью аякса, не забудьте поменять параметр "upload_path" в объекте формирования загрузчика в шаблоне компонента. И если не хочется заморачиваться файлом-приемником, то поставьте туда этот же компонент.

ТВОРИТЬ — ВОТ НАСЛАЖДЕНИЕ!

линия

четверг, 16 ноября 2017 г.

Bitrix: ajax загрузка фото или облегчаем себе жизнь

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

Ближе к делу

Итак, что имеем:
Обычная форма. При клике на отправить обрабатывается JQUERY и предает данные в /inlude/ajax/form.php. Разумеется все работает AJAX-ом.

Теперь добавляем в шаблон формы компонент:

Ищем компонент в /bitrix/components/main.file.input/ копируем шаблон в шаблон сайта. переименуем шаблон в drag_n_drop — на случай если будем менять стили.

Открываем форму и видим такую красоту:

Кстати, можно сделать мульти загрузку, задать маску входных файлов.
Компонент загружает файл в /upload/main/ и после загрузки возвращает id файла.

Мало кто знает что в битриксе есть компонент, который может загружать файлы через drag n drop.

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

После размещения кода в php файле сможем загрузить файлы через drag n drop. Цель данной статьи рассказать о наличии такого компонента. Всем удачи и успехов в работе!


[an error occurred while processing the directive]
Карта сайта