тут - делала drag and drop без битриксовского компонента |
php
<?$APPLICATION->IncludeComponent("bitrix:main.file.input", "drag_n_drop",
array(
"INPUT_NAME"=>"MY_NAME_INPUT", // уникальный name инпута, без него выдает ошибку
"MULTIPLE"=>"Y", //Y | N - позволяет или не позволяет множественную загрузку
"MODULE_ID"=>"main", // main | iblock | blog | forum и пр. - имя модуля, к которому файл привязан будет и в какую папку попадет относительно upload.
"MAX_FILE_SIZE"=>"", //максимальный размер файла
"ALLOW_UPLOAD"=>"F", //тип файлов, который будем грузить: F - файлы, I - картинки, A - все подряд.
"ALLOW_UPLOAD_EXT"=>"" , // какие расширения файлов можно грузить. Работает если ALLOW_UPLOAD => F,
"INPUT_CAPTION" => "Добавить фото",
"INPUT_VALUE" => $arFileIds, //[$fileId1,$fileId2,$fileId3] - ид файлов
),
false
);?> |
ALLOW_UPLOAD_EXT - например doc,docx,xlsx,csv,xls,ppt,pptx,txt,pdf,jpg,jpeg,png,webp,heic,tiff,bmp,ecw,zip,rar,7z,dwg,dwt,dws,mp4,mov,wmv,avi,mkv,log,lic,dwg,dwt,eml,nfo
подписаться на события
js
BX.addCustomEvent('BFileDLoadFormControllerInit', function (e) {
console.log('BFileDLoadFormControllerInit', e);
});
BX.addCustomEvent('BFileDSelectFileDialogLoaded', function (e) {
console.log('BFileDSelectFileDialogLoaded', e);
});
BX.addCustomEvent('BFileDLoadFormController', function (e) {
console.log('BFileDLoadFormController', e);
});
BX.addCustomEvent('uploadStart', function (e) {
console.log('uploadStart', e);
});
BX.addCustomEvent('progress', function (e) {
console.log('progress', e);
});
BX.addCustomEvent('uploadFinish', function (e) {
console.log('uploadFinish', e);
});
BX.addCustomEvent('OnFileUploadSuccess', function (e) {
console.log('OnFileUploadSuccess', e);
});
BX.addCustomEvent('OnFileUploadFail', function (e) {
console.log('OnFileUploadFail', e);
});
BX.addCustomEvent('OnFileUploadRemove', function (e) {
console.log('OnFileUploadRemove', e);
});
|
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>"
} }); |
Задача: сделать отправку формы с файлами, добавлять элемент в инфоблок |
filesRequestTransferCustomer - переменная, которая слушает добавление-удаление файлов
var filesRequestTransferCustomer = [];
BX.ready(function(){
BX.addCustomEvent('OnFileUploadSuccess', function (e) {
filesRequestTransferCustomer.push(e.element_id);
});
BX.addCustomEvent('OnFileUploadRemove', function (deletedFileId) {
if(typeof deletedFileId != 'undefined') {
filesRequestTransferCustomer = filesRequestTransferCustomer.filter((fileId) => fileId != deletedFileId);
}
});
});
|
тут runComponentAction, в который мы передаем
filesRequestTransferCustomernew BX.ajax.runComponentAction('dealer:client', 'sendRequest', {
mode: 'class',
data: {
clientEmail: email,
requestDescription: requestDescription,
requestFiles: filesRequestTransferCustomer,
sessid: BX.message('bitrix_sessid'),
},
}).then(
function (response) {
if (response.status == 'success') {
}
},
function (response) {
console.log(response);
},
); |