FileUploader для загрузки файлов

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

Импорт и базовое использование

Для начала работы необходимо импортировать компонент и CSS-стили:

Ключевые параметры:

  • labelText — текстовая метка для всей зоны загрузки.
  • buttonLabelText — текст кнопки выбора файлов.
  • multiple — булевый флаг, позволяющий загружать несколько файлов одновременно.
  • bind:files — двусторонняя привязка массива выбранных файлов.

Работа с выбранными файлами

После выбора файлов массив files содержит объекты типа File, которые можно обработать:

$: console.log(files);

Каждый объект содержит стандартные свойства File:

  • name — имя файла.
  • size — размер в байтах.
  • type — MIME-тип файла.
  • lastModified — timestamp последнего изменения.

Настройка отображения загруженных файлов

Для отображения списка выбранных файлов используется компонент FileUploaderItem:

 removeFile(file)}
/>

Параметры FileUploaderItem:

  • file — объект файла.
  • status — текущее состояние файла: "edit", "complete", "uploading", "error".
  • on:delete — событие удаления файла из списка.

Функция удаления файла может выглядеть так:

function removeFile(file) {
  files = files.filter(f => f !== file);
}

Ограничения и валидация

FileUploader поддерживает следующие проверки:

  • accept — MIME-типы или расширения файлов:
  • disabled — блокировка компонента для предотвращения выбора файлов:
  • Ограничение размера файла:
function validateFile(file) {
  const maxSize = 5 * 1024 * 1024; // 5 МБ
  if (file.size > maxSize) {
    alert(`Файл ${file.name} слишком большой`);
    return false;
  }
  return true;
}
  • Обработка событий on:add и on:delete позволяет выполнять дополнительную валидацию:
 {
    const file = e.detail;
    if (!validateFile(file)) {
      files = files.filter(f => f !== file);
    }
  }}
/>

Загрузка файлов на сервер

Для отправки файлов на сервер используется стандартный объект FormData:

async function uploadFiles() {
  const formData = new FormData();
  files.forEach(file => formData.append('files', file));

  const response = await fetch('/upload', {
    method: 'POST',
    body: formData
  });

  if (response.ok) {
    console.log('Файлы успешно загружены');
  } else {
    console.error('Ошибка загрузки');
  }
}

Для отображения прогресса загрузки можно использовать параметр status="uploading" для соответствующего FileUploaderItem:

Настройка внешнего вида

Компонент поддерживает стилизацию через классы и пропсы:

  • size="sm|md|lg" — размеры компонента.
  • hideLabel — скрыть текстовую метку.
  • iconDescription — описание для кнопки выбора файлов (важно для доступности).

Пример с кастомным стилем:

В CSS:

.custom-uploader {
  border: 2px dashed #0f62fe;
  border-radius: 4px;
  padding: 20px;
}

События

Основные события компонента:

  • add — файл добавлен.
  • delete — файл удален.
  • change — изменения в списке файлов.

Пример обработки:

 console.log('Добавлен файл:', e.detail)}
  on:delete={(e) => console.log('Удален файл:', e.detail)}
/>

Советы по производительности

  • Для больших файлов рекомендуется использовать ленивую обработку и отображать прогресс загрузки.
  • Ограничение количества одновременно загружаемых файлов снижает нагрузку на сервер и клиент.
  • Предварительная валидация MIME-типа и размера файла предотвращает лишние сетевые запросы.

Совместимость с Svelte

FileUploader полностью интегрирован с реактивностью Svelte:





Общий размер выбранных файлов: {totalSize} байт

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

Оглавление