Модули > Загрузка файлов > Подключение

JS

// Подключаем плагин загрузки файлов
var classFile = 'js-files__file';
lemurro.file.init(classFile);

// Вешаем загрузчик на кнопку
var btn = $('#js-file-upload');
var onComplete = function (fileID, fileAction, fileName, btn) {
   $('#js-files__box').append(_templates.file({
       id    : fileID,
       action: fileAction,
       name  : fileName
   }));
   
   swal('Выполнено', 'Файл <strong>' + fileName + '</strong>' + ' успешно загружен', 'success');
};
lemurro.file.bindUpload(btn, onComplete);

// Вешаем загрузчик на кнопку и переопределяем параметры по умолчанию
var options = {...};
lemurro.file.bindUpload(btn, onComplete, options);

HTML-шаблоны Template7

Для коробки с файлами

<div class="form-group m-form__group">
    <label>Файлы</label>
    <table class="table">
        <!-- Динамический контент -->
        <tbody id="js-files__box"></tbody>
    </table>
    <button type="button" id="js-files__upload" class="btn btn-brand btn-sm m-btn--icon">
        <span>
            <i class="fas fa-plus"></i>
            <span>Загрузить файл</span>
        </span>
    </button>
</div>

Для файла

<tr class="js-files__file" data-file-id="{{id}}" data-file-action="{{action}}">
    <td class="align-middle">
        <a href="javascript:lemurro.file.download('{{id}}', '{{name}}');">
            <span class="js-name">{{name}}</span>
        </a>
    </td>
    <td class="w1 text-nowrap">
        <button type="button" class="btn btn-danger btn-sm m-btn--icon" onclick="lemurro.file.remove('{{id}}')">
            <span>
                <i class="far fa-trash-alt"></i>
                <span>удалить</span>
            </span>
        </button>
    </td>
</tr>

Описание элементов шаблона

  1. Обязательные переменные
  • id (integer|string) - ИД файла
    • ИД записи в БД (для ранее загруженных файлов)
    • Имя файла во временном хранилище (для новых файлов)
  • action (string) - Действие совершаемое с файлом
    • add - для только что загруженного файла (перенос в постоянное хранилище и запись в БД)
    • remove - для удаляемого файла (удаление файла и записи в БД)
    • exist (или любое другое название) - для существующего файла, файлы с действием отличным от add и remove пропускаются и не участвуют в обработке
  • name (string) - Оригинальное имя загруженного файла
  1. Обязательный класс
  • js-files__file - Класс для элемента, который вы указали при подключении плагина
  • js-name - Класс для строки с оригинальным именем файла
  1. Обязательные атрибуты
  • data-file-id - ИД файла
  • data-file-action - Действие совершаемое с файлом

Логика добавления файла

  1. Файл загружается и мы получаем три переменные id, action и name
  2. Строим элемент используя эти данные

Логика удаления файла

Удаление зависит от действия

  • action=add - просто убираем элемент файла из DOM (физически загруженный временный файл будет удалён чистильщиком)
  • action=[ЛЮБОЕ_ДЕЙСТВИЕ_ОТЛИЧНОЕ_ОТ_ADD] - меняем action на remove и визуально скрываем эелемент (сейчас файл просто помечен на удаление, физически файл будет удалён если пользователь сохранит форму)