FileUploaderButton

FileUploaderButton — это специализированный компонент библиотеки Carbon Components Svelte, предназначенный для создания кнопки загрузки файлов с полным контролем над процессом выбора, валидации и обработки файлов. Он обеспечивает интеграцию с остальными элементами дизайна Carbon и поддерживает расширяемую кастомизацию через пропсы и события.

Основные возможности

  • Выбор одного или нескольких файлов с помощью стандартного диалога выбора.
  • Валидация формата и размера файлов до их загрузки.
  • Поддержка drag-and-drop в сочетании с визуальной кнопкой.
  • Полная интеграция с компонентами FileUploader для отображения списка выбранных файлов.
  • Настраиваемый текст кнопки и подсказок.
  • События для отслеживания действий пользователя и состояния загрузки.

Импорт и базовое использование
  • accept — список допустимых форматов файлов.
  • buttonKind — тип кнопки (например, primary, secondary, danger).
  • labelText — текст кнопки.
  • on:change — событие, вызываемое при выборе файлов. event.detail.files содержит массив выбранных файлов.

Пропсы компонента

Пропс Тип Описание
accept string Ограничение по типу файлов, поддерживается синтаксис HTML
buttonKind string Вид кнопки: primary, secondary, tertiary, danger
disabled boolean Блокировка кнопки
labelText string Текст, отображаемый на кнопке
multiple boolean Разрешает выбор нескольких файлов одновременно
size string Размер кнопки: sm, md, lg
name string Имя поля, используемое при отправке формы
title string Атрибут title для кнопки

События

Компонент поддерживает несколько ключевых событий:

  • change — вызывается при изменении выбранных файлов. В event.detail.files хранится массив объектов File.
  • click — срабатывает при клике на кнопку.
  • focus / blur — стандартные события фокуса для кнопки.

Пример обработки нескольких событий:

 console.log('Фокус на кнопке')}
  on:blur={() => console.log('Фокус потерян')}
/>

Интеграция с FileUploader

Чаще всего FileUploaderButton используется вместе с компонентом FileUploader, чтобы создавать полноценный интерфейс загрузки файлов с визуализацией выбранных файлов и поддержкой удаления:




  


{#if uploadedFiles.length > 0}
  
    
    {#each uploadedFiles as file}
      
  • {file.name} ({Math.round(file.size / 1024)} KB)
    • 
    {/each}
  

{/if}
  • bind:files связывает список файлов с локальной переменной.
  • Список выбранных файлов можно использовать для отображения, предварительной обработки или отправки на сервер.

Настройка валидации файлов

FileUploaderButton поддерживает проверку:

  • Тип файла через accept.
  • Максимальный размер с помощью кастомной функции:
function validateFile(file) {
  const maxSize = 5 * 1024 * 1024; // 5 MB
  if (file.size > maxSize) {
    alert(`${file.name} слишком большой файл`);
    return false;
  }
  return true;
}

function handleFiles(event) {
  const validFiles = Array.from(event.detail.files).filter(validateFile);
  uploadedFiles = [...uploadedFiles, ...validFiles];
}

Стилизация и адаптация

  • Можно менять цвет и вид кнопки через buttonKind.
  • Размер кнопки задаётся через size.
  • Поддерживается добавление классов и кастомного CSS для адаптации под корпоративный стиль:

Особенности использования

  • Компонент полностью совместим с Svelte reactive statements, что позволяет динамически изменять свойства кнопки.
  • Поддерживает accessibility: корректно работает с клавиатурой и экранными считывателями.
  • При использовании нескольких FileUploaderButton в одном FileUploader важно следить за уникальными идентификаторами файлов для корректного связывания событий.
Оглавление