Кастом разметка в загрузчике файлов с drag n drop

Name: Кастом разметка в загрузчике файлов с drag n drop
Availability: InStock
Author: Falcon Space

Ссылка на документацию https://falcon.web-automation.ru/docs/falcon-space--rabota-s-resursami (раздел Загрузка файлов с drop областью и гибкой разметкой).

Разметка сниппета компонента:

<div class="as-files" data-code="watch_files" data-itemid="5" data-disabledeleteconfirm="1" data-successmsg="OK">
  <script type="text/html" class="as-files-makeup hide">
	<h3>Загрузка файлов {edit-link}</h3>
    {dropzone}    
    {upload-button}
    <span class="badge badge-info">Файлы размером до 1МБ</span>
    {progressbar}
    <hr>
    {files}
    
  </script>
  <script type="text/html" class="as-files-itemMakeup hide">
    <div class="d-inline-block p-2 text-center" style="width: 250px" data-itemID='{id}'>
    	<a href="{url}" target="_blank"><img width="60px" src='{icon-url}' alt=""/></a><br>
      	<b>{title}</b><br>
      	<span>{size}</span><br>
      	{delete-button}
    </div>

  </script>
</div>

makeup задает общий каркас компонента, itemMakeup задает разметку 1 файла в списке.

Обратите внимание, что кастом разметка хранится в отдельных полях.

Другие демостенды

— Вывод файлов в таблице на сайте. Управление файлами в колонке
— Загрузка файлов через перетаскивание в личном кабинете - drag n drop
— Загрузка файлов в личном кабинете на сайте. Варианты компонента

Что есть в базе знаний по этой теме

— Как принимать в форму не 1 параметр (itemID), а несколько входящих параметров? data-param-p1
— Как добавить в колонку таблицы управление файлами
— Подгружаемые файлы
— Базовая верстка для каталога элементов
— Загрузка файлов с drop областью и гибкой разметкой (компонент as-files)

В чем выгода для бизнеса?

Кастомная разметка загрузчика файлов позволяет вписать его в дизайн вашего сайта и задать нужные тексты, иконки. Вы создаёте целостный интерфейс, соответствующий бренду и задачам.