File uploader
Figma
File uploader — интерактивный элемент, с помощью которого можно загружать файлы с устройства на сервер.
Из чего состоит загрузчик-область
  1. Внешний лейбл
  2. Область загрузки
  3. Внутрення иконка
  4. Внутренний заголовок
  5. Подзаголовок
  6. Описание
  7. Название файла
  8. Иконка отмены загрузки
  9. Размер файла (вес)
  10. Индикатор загрузки
  11. Элемент загрузки (область)
  12. Иконка формата
  13. Иконка удаления файла
  14. Превью изображения
  15. Иконка вызова редактора изображения
Из чего состоит загрузчик-кнопка
  1. Внешний лейбл
  2. Иконка справа
  3. Описание
  4. Название кнопки
  5. Кнопка загрузки
  6. Иконка слева
  7. Название файла
  8. Иконка отмены загрузки
  9. Размер файла (вес)
  10. Индикатор загрузки
  11. Иконка удаления файла
  12. Превью изображения
  13. Иконка вызова редактора изображения
Основные
Отключаемые
Редактируемые
Основные свойства
Тема (Theme)
Мод (Mode)
Состояние (State)
Размер (Size)
Загрузка (Loading)
Отключаемые элементы
👁 Превью изображения (Image Preview)
👁 Внешний лейбл (Outside Label)
👁 Описание (Description)
👁 Заголовок внутри области (Title)
👁 Подзаголовок внутри области (Subtitle)
👁 Иконка внутри области (Icon)
Редактируемые элементы
✏️ Внешний лейбл (Outside Label)
✏️ Описание (Description)
✏️ Заголовок внутри области (Title)
✏️ Подзаголовок внутри области (Subtitle)
✏️ Иконка внутри области (Icon)
Сокращение названия файла
Текст названия файла сокращается ровно посередине. Зависит от ширины текстового элемента и не зависит от количества символов в расширении или в названии
Режим “multiple”
Режим “Multiple” — загрузка нескольких файлов одновременно
Изображение внутри превью
По умолчанию изображение масштабируется внутри контейнера, чтобы полностью в него помещаться (FIT)
Формат
Иконка в элементах загрузки области меняется, в зависимости от формата файла
Минимальная ширина
Минимальная ширина Fileuploader (field) - 296px. Можно задать фиксированную ширину
По ширине контейнера
Может автоматически растягиваться во всю ширину внешнего контейнера
Соотношение сторон превью
Соотношение сторон превью всегда 16:9. Элементы загрузки, заголовк и описание растягиваются под превью