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

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

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

  • загрузка путем перетаскивания файлов 
  • загрузка файлов без дополнительного диалогового окна
  • возможность менять разметку компонента
  • вывод списка загруженных файлов
  • возможность удаления файлов 
  • вывод по файлу размера
<div class="as-files" data-code="productImages" data-itemid="5" data-disabledeleteconfirm="1" data-successmsg=" "></div>

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

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

Кастом разметка компонента as files

Также вы можете задать свою кастомную верстку для компонента, а также верстку для вывода отдельного элемента в специальных div 
<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

Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Выгода от использования Falcon Space

В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
Нужна бесплатная консультация?
Планируете делать веб-проект?
Сайт использует Cookie. Правила конфиденциальности OK