Вступление #

Для кастомизации поле загрузки можно использовать класс .js-upload по умолчанию и стандартную разметку.

Установка #

Пример разметки и инициализации кастомизированного поля загрузки.

<input
	class="js-upload"
	type="file"
	multiple
	accept="image/jpeg, .png, .pdf"
	data-upload-options='{
		"maxSize": "2097152",
		"content": "Загрузите файл в формате .jpg, .png и .pdf, размер файла не более 2МБ."
	}'
/>

const options = {
	maxSize: '2097152',
	preview: true,
	previewDocs: '../assets/img/preview-docs.svg',
	formats: ['image/jpeg', '.png', '.pdf'],
	content: 'Загрузите файл в формате .jpg, .png и .pdf, размер файла не более 2МБ.',
}

BasicUploadFile.init('.my-upload', options)
BasicUploadFile.init(document.querySelector('.my-upload'), options)
BasicUploadFile.init(document.querySelectorAll('.my-upload'), options)

// или

BasicUploadFile.init() // по умолчанию инициaлизирует элементы с классом .js-upload

Конфигурация #

Настройки, заданные с использованием data-атрибутов.

data-upload-options #

В значение указываются параметры для гибкой настройки кастомизированного поля загрузки.

<input
	class="js-upload"
	type="file"
	accept=".jpg, .png, .pdf"
	data-upload-options='{
		"preview": false,
		"maxSize": "2097152",
		"content": "Загрузите файл в формате .jpg, .png и .pdf, размер файла не более 2МБ.."
	}'
/>

Параметры:

Методы #

getValue() #

Получить значение поля.

BasicUploadFile.getValue('.my-upload') // принимает значение типа Object или String

clear() #

Очистить поле.

BasicUploadFile.clear('.my-upload') // принимает значение типа Object или String

Экземпляр #

У каждого инициализированного элемента есть свой экземпляр.

const myCustomUpload = document.querySelector('.my-upload')

console.log(myCustomUpload.BasicUploadFile) // пример экземпляра

Прослушивание событий #

Можно прослушать события элемента и получить необходимые параметры.

upload:change #

Срабатывает при любом изменении значения, будь то загрузка файлов или очистка поля.

Параметры:

document.querySelector('#my-upload').addEventListener(
	'upload:change',
	function (event) {
		console.log(event.detail) // параметры
	},
	false,
)

upload:completed #

Срабатывает при загрузке файлов.

Параметры:

document.querySelector('#my-upload').addEventListener(
	'upload:completed',
	function (event) {
		console.log(event.detail) // параметры
	},
	false,
)

upload:clear #

Срабатывает при очистке кастомизированного поля загрузки.

Параметры:

document.querySelector('#my-upload').addEventListener(
	'upload:clear',
	function (event) {
		console.log(event.detail) // параметры
	},
	false,
)