Генератор паролей

Загрузка файлов через bx drag and drop

тут  - делала 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, в который мы передаем filesRequestTransferCustomer
new 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); 
    },
);