+7 495 008 8452
  • Загрузка
Выберите ваш цвет

Загрузка файлов через BX drag_n_drop - загрузчик

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


Загрузка файлов через BX drag_n_drop - загрузчик

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

Компонент называется 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-ами. Без него у вас файл может загрузиться и сохраниться нормально, но индикатор загрузки зависнет, как будто файл не загрузился и процесс завис. Но обо всем по порядку.

Пользование компонента.
Вызываем компонент:
<?$APPLICATION->IncludeComponent("bitrix:main.file.input", "drag_n_drop",
   array(
      "INPUT_NAME"=>"TEST_NAME_INPUT",
      "MULTIPLE"=>"Y",
      "MODULE_ID"=>"main",
      "MAX_FILE_SIZE"=>"",
      "ALLOW_UPLOAD"=>"A", 
      "ALLOW_UPLOAD_EXT"=>""
   ),
   false
);?>
 
Параметры:
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 - функции, в момент загрузки страницы, она пустая и компонент скрыт. Активируется после перетаскивания файла в дропзону. После этого компонент нормально отображается на странице при ее загрузке.

Сам загрузчик формируется объектом:
BfileFD<?=$uid?> = new BlogBFileDialog({
   'mode' : variant, // simple | extended вариант отображения - простой загрузчик или драг-н-дроп
   'CID' : "<?=$arResult['CONTROL_UID']?>", // контрольная строка
   'upload_path' : "<?=CUtil::JSEscape(htmlspecialcharsback(POST_FORM_ACTION_URI))?>", // путь, куда грузить файлы
   'multiple' : <?=( $arParams['MULTIPLE'] == 'N' ? 'false' : 'true' )?>, // загрузка нескольких файлов одновременно
   'controller':  <?=$controller?>, // #id - основного div-а
   'inputName' : "<?=CUtil::JSEscape($controlName)?>",
   'fileInput' :  "file-fileUploader-<?=$uid?>",
   'fileInputName' : "mfi_files[]", // массив, который формируется отправке файлов
   'msg' : { // всякие сообщения
      'loading' : "<?=CUtil::JSEscape(GetMessage('BFDND_FILE_LOADING'))?>",
      'file_exists':"<?=CUtil::JSEscape(GetMessage('BFDND_FILE_EXISTS'))?>",
      'upload_error':"<?=CUtil::JSEscape(GetMessage('BFDND_UPLOAD_ERROR'))?>",
      'access_denied':"<p style='margin-top:0;'><?=CUtil::JSEscape(GetMessage('BFDND_ACCESS_DENIED'))?></p>"
   }
});

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

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

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

На этом все.

 

 

Источник: http://dev.1c-bitrix.ru/community/webdev/user/64008/blog/7270/

Назад в раздел

Подписаться на новые материалы раздела:
Загрузка...