Загрузка файлов с drop областью и гибкой разметкой (компонент as-files)

Для этих целей используется отдельный сниппет с выводом отличающимся от компонента менеджер ресурсов. 

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

• загрузка путем перетаскивания файлов 
• загрузка файлов без дополнительного диалогового окна
• возможность менять разметку компонента
• вывод списка загруженных файлов
• возможность удаления файлов 
• вывод по файлу размера

<div class="as-files" data-code="productImages" data-itemid="5" data-disabledeleteconfirm="1" data-successmsg=" "></div>

Data параметры компонента: 

• data-сode - это код менеджера ресурсов, 
• data-itemID - к какой сущности привязаны файлы
• data-disableDeleteConfirm - если 1 то удаление файлов будет без запроса подтверждения действия
• data-successMsg - какое сообщение выводим при успешной загрузке через drop область (если пробел - то сообщение не выводится). 
• data-progressStyle - настройка вида полоски progressbar, по умолчанию bg-primary progress-bar-striped
• data-uploadBtnText - текст на кнопке загрузить
• data-uploadBtnClass - css класс для кнопки загрузить
• data-uploadText - дополнительная подсказка рядом с кнопкой загрузить
• data-downloadArchive="1" - если 1, то будет кнопка скачивания всех файлов через упаковку в zip (обновление сентябрь 22).
• data-uploadBody="1", если непустое значение, то будет возможность кидать файл просто на страницу для загрузки файла (при этом на странице может быть только один такой элемент).

<div class="as-files">
	<script type="text/html" class="as-files-makeup hide"></script>
	<script type="text/html" class="as-files-itemMakeup hide"></script>
</div>

В рамках этих элементов можно вставить дополнительные переменные. 

Для makeup это: 

• {files} - вывод списка загруженных файлов
• {edit-link} - вывод ссылки на управление типом ресурса (для администратора)
• {upload-button} - кнопка загрузки 
• {dropzone} - область для загрузки файлов путем перетаскивания
• {progressbar} - полоска прогресса загрузки

Для itemMakeup есть следующие параметры: 

• {id} - id файла
• {icon-url} - ссылка на превью
• {icon} - иконка рядом с названием
• {title} - название файла
• {url} - ссылка на файл
• {size} - вывод размера файла
• {delete-button} - кнопка удаления

Пример как работает кастом разметка для as-files - https://demo.web-automation.ru/list/watch/kastom-razmetka-v-zagruzchike-faylov-s-drag-n-drop---82

Когда требуется указать шаблоны разметки внутри кастом-формы

В случае использовании кастом разметки внутри формы не получится использовать script элементы (нельзя использовать теги script в кастом разметки форм).

В этом случае используем div вместо скрипт в таком виде (но помните, что желательно избежать испольования сниппетов в шаблонах (as-form, as-table и т.д.), т.к. они будут сразу рендериться при загрузке): 

<div class="as-files">
	<div class="as-files-makeup hide"></div>
	<div class="as-files-itemMakeup hide"></div>
</div>

Коллбеки для as-files

Для компонента as-files работает 3 коллбека JS: 

as.filescallbacks["code1_getItems"] = function(data, params){}
as.filescallbacks["code1_uploadComplete"] = function(data, evt){}
as.filescallbacks["code1_delete"] = function(data, params){}

• getItems - срабатывает при выводе файлов на странице 
• uploadComplete - когда загружен файл
• delete - когда файл удален.

Отображение размера файлов в as files

Примечание: для отображения размера файлов необходимо следующее: 

1. Добавить столбец size в as_rs_resources: 

IF COL_LENGTH( 'as_rs_resources' , 'size' ) IS NULL
BEGIN
      ALTER TABLE as_rs_resources
      ADD size int NULL
END

2. Обновить процедуру as_resources_addResource: 

ALTER PROCEDURE [dbo].[as_resources_addResource] 
@itemID nvarchar(128),
@typeCode nvarchar(128),
@url nvarchar(512),
@thumbUrl nvarchar(512),
@title nvarchar(128),
@size int,
@username nvarchar(128)
AS
BEGIN

insert into as_rs_resources (url, thumbUrl, itemID, title, entityCode, ord, size) 
values(@url, @thumbUrl, @itemID, @title, 
	(select top 1 entityCode from as_rs_types where lower(code) = lower(@typeCode)),
	(select max(id)+1 from as_rs_resources),
	@size
)

select  Scope_identity() id

END