Компоненты

Input file

Скачать компонент

Данный компонент работает в ios начиная с версии 14.1

Все файлы необходимые для корректной работы input file представлены в архиве.

Стили сделаны исключительно для примера, на ваших проектах вы можите стилизовать компонент в соответствии с макетом.

Для инициализации input file вам нужно создать экземпляр класса Upload, в который вы передаёте первым аргументом дом элемент, а вторым обьект с настройками.

Пример: const uploadFile = () => new Upload(uploadFileBlock, {options}).

Настройки:

uploadLength: number - максимальное количество загружаемых файлов. При количестве большем или равном двум к инпуту добавляется аттрибут multiple.

accept: ['.pdf', '.docx', '.xlsx'] - допустимые для загрузки расширения файлов. Если данное поле отсутствует, то можно будет загрузить любой файл.

maxFullSize: размер в байтах - максимально допустимый общий размер файлов.

maxFileSize: размер в байтах - максимально допустимый размер файла.

preview: булево значение - отвечает за показ превью загруженных файлов. Рендерится на js.

previewImg: булево значение - отвечает за показ миниатюры картинки, в случае загрузки изображений. Рендерится на js.

fileInfo: {fileName: булево значение, fileSize: булево значение} - обьект с двумя полями, отвечающий за показ информации о файле. Рендерится на js.

iconFormat: {} - обьект в котором по ключам лежат пути к иконкам с форматом загруженного файла (png: './img/file/icon-file-png.png').

emptyMessage: сообщение - сообщение об ошибке при пустом инпуте.

errorMessage: сообщение - сообщение об ошибке в загруженных файлах.

Данный компонент интегрирован с валидацией Лиги.

Input file для загрузки изображений с ограничением по размеру файла, с превью загруженных файлов

Input file для загрузки файлов с ограничением по размеру всех файлов, с превью загруженных файлов

Input file для загрузки изображений с ограничением по размеру файла, с превью загруженных файлов в виде dropZone

Перетащите сюда файлы

Input file для загрузки файлов с ограничением по размеру файла, с превью загруженных файлов в виде dropZone

Перетащите сюда файлы

Input file для загрузки файлов с ограничением по размеру файла, с превью загруженных файлов в блок превью и с dropZone

Перетащите сюда файлы