FileUploaderDropContainer

FileUploaderDropContainer — это компонент библиотеки Carbon Components Svelte, предназначенный для организации зоны перетаскивания файлов и их загрузки. Он реализует функционал drag-and-drop с визуальными подсказками для пользователя и интеграцию с обработкой выбранных файлов.

Основные свойства

  • accept Определяет допустимые типы файлов. Принимает строку с MIME-типами или расширениями, разделёнными запятой. Например:

  • disabled Логическое свойство, запрещающее использование компонента. Визуально контейнер становится неактивным, а события drop игнорируются.

  • multiple Позволяет загружать несколько файлов одновременно. Значение по умолчанию — false. Пример:

  • labelText Текст подсказки внутри контейнера. Обычно используется для информирования о действии: «Перетащите файлы сюда или нажмите для выбора».

  • helperText Дополнительный текст под контейнером, который уточняет правила загрузки, например: размер файлов или допустимые форматы.

  • size Определяет визуальный размер контейнера. Поддерживаются значения 'sm', 'md' и 'lg'. Размер влияет на padding, шрифты и отступы.

События

  • on:drop Срабатывает при отпускании файлов над контейнером. Передаёт объект события DragEvent, из которого можно получить event.dataTransfer.files.

  • on:add-files Внутреннее событие компонента, которое вызывается при выборе файлов через диалоговое окно или drag-and-drop. Пример обработки:

     handleFiles(event.detail.files)}
/>

  • on:click Срабатывает при клике на контейнер и открывает стандартное окно выбора файлов. Можно использовать для кастомной логики.

Стилизация и кастомизация

  • Классы CSS

    • .bx--file__drop-container — основной контейнер.
    • .bx--file__drop-container--disabled — стиль для заблокированного состояния.
    • .bx--file__drop-container--drag-over — применяется при наведении файлов на контейнер.

  • Слот default Позволяет вставлять кастомный контент вместо стандартного текста. Например, можно добавить иконку загрузки или более сложный макет:

    
  
    
    Перетащите сюда файлы или выберите через диалог

Примеры использования

Пример 1: Простая загрузка изображений



 handleFiles(event.detail.files)}
/>


    
  {#each images as file}
    
  • {file.name}
    • 
  {/each}

Пример 2: Множественный выбор с кастомным слотом


  

    Здесь можно выбрать сразу несколько файлов

Рекомендации по использованию

  • Всегда указывайте accept, чтобы предотвратить загрузку неподдерживаемых форматов.
  • Для улучшения UX рекомендуется использовать helperText с подсказкой по размеру и типу файлов.
  • При множественной загрузке (multiple=true) лучше обрабатывать массив файлов через цикл и добавлять их в состояние компонента.
  • Можно комбинировать слоты и стандартные тексты, чтобы создавать более сложные интерфейсы загрузки.

Взаимодействие с другими компонентами

  • Часто используется вместе с FileUploaderItem, который отображает отдельные файлы после загрузки.
  • Подходит для интеграции с Form и валидацией, например, с использованием состояния valid или invalid.

Поддержка drag-and-drop

Компонент автоматически управляет классами при наведении файлов (drag-over) и возвращается в исходное состояние после drop. Это упрощает визуализацию процесса загрузки. Дополнительно можно расширять функциональность через события on:drop и on:add-files для кастомной обработки файлов.

Оглавление