Валидация типов файлов

Основные принципы работы с файловыми инпутами

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

Компонент FileUploader предоставляет следующие свойства для управления валидацией:

  • accept — строка с MIME-типами или расширениями файлов, разрешённых для загрузки.
  • multiple — булевое значение, указывающее, разрешена ли множественная загрузка.
  • sizeLimit — ограничение размера файла в байтах.
  • onAddFiles — коллбэк, вызываемый при добавлении файлов.
  • invalidFile — свойство, позволяющее отобразить ошибку в случае несоответствия файла установленным правилам.

Пример базового использования:

<script>
  import { FileUploader } from 'carbon-components-svelte';
  
  let uploadedFiles = [];
  
  function handleAddFiles(event) {
    const files = event.detail.files;
    uploadedFiles = [...uploadedFiles, ...files];
  }
</script>

<FileUploader
  label="Загрузить файлы"
  accept=".jpg,.png,.pdf"
  multiple={true}
  sizeLimit={10485760}
  on:addFiles={handleAddFiles}
/>

В этом примере разрешена загрузка изображений и PDF-файлов размером до 10 МБ.

Валидация MIME-типа и расширений

Свойство accept выполняет фильтрацию файлов по типу на уровне браузера. Допускается использование следующих форматов:

  • MIME-типы: image/jpeg, application/pdf
  • Расширения: .jpg, .png, .pdf
  • Комбинированный вариант: image/*,application/pdf

При добавлении файла вне указанных типов компонент автоматически отметит его как некорректный и вызовет событие on:invalidFile. Пример обработки:

<FileUploader
  label="Загрузить файлы"
  accept="image/*,application/pdf"
  on:invalidFile={(event) => {
    console.log('Некорректный файл:', event.detail.file.name);
  }}
/>

Важно: фильтрация accept выполняется на стороне клиента, но не заменяет серверную проверку. Для безопасности необходимо дублировать проверки на сервере.

Проверка размера файлов

Свойство sizeLimit позволяет ограничить размер загружаемых файлов. Если файл превышает лимит, компонент автоматически генерирует событие on:invalidFile.

<FileUploader
  label="Загрузить файлы"
  accept="image/*"
  sizeLimit={5242880}  // 5 МБ
  on:invalidFile={(event) => {
    alert(`Файл ${event.detail.file.name} слишком большой`);
  }}
/>

Для проектов с множественной загрузкой можно реализовать фильтрацию файлов вручную перед добавлением в состояние:

function handleAddFiles(event) {
  const validFiles = event.detail.files.filter(file => file.size <= 5242880);
  uploadedFiles = [...uploadedFiles, ...validFiles];
}

Кастомная валидация

Помимо стандартных проверок по MIME и размеру, FileUploader позволяет реализовать кастомную валидацию с помощью функции внутри on:addFiles:

function customValidation(files) {
  return files.filter(file => {
    const isSupportedType = ['image/jpeg', 'image/png'].includes(file.type);
    const isSmallEnough = file.size <= 5 * 1024 * 1024;
    const isNotHidden = !file.name.startsWith('.');
    return isSupportedType && isSmallEnough && isNotHidden;
  });
}

function handleAddFiles(event) {
  uploadedFiles = [...uploadedFiles, ...customValidation(event.detail.files)];
}

Этот подход обеспечивает максимальную гибкость и позволяет учитывать дополнительные бизнес-правила, например, игнорирование скрытых файлов или проверку специфических расширений внутри допустимых MIME-типов.

Отображение ошибок и сообщений пользователю

Компонент предоставляет встроенные элементы для отображения ошибок:

  • invalidFileText — текст ошибки для некорректного файла.
  • invalidFileTextBody — подробное описание причины ошибки.
  • sizeLimitMessage — сообщение при превышении размера файла.

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

<FileUploader
  label="Загрузить файлы"
  accept="image/*,application/pdf"
  sizeLimit={5242880}
  invalidFileText="Неверный файл"
  invalidFileTextBody="Допустимы только изображения и PDF до 5 МБ"
/>

Для динамического управления ошибками можно использовать состояние Svelte:

<script>
  let errorMessage = '';

  function handleInvalidFile(event) {
    errorMessage = `Файл ${event.detail.file.name} не соответствует требованиям`;
  }
</script>

<FileUploader
  label="Загрузить файлы"
  accept="image/*"
  sizeLimit={5242880}
  on:invalidFile={handleInvalidFile}
/>

{#if errorMessage}
  <div class="bx--file__error">{errorMessage}</div>
{/if}

Практические рекомендации

  • Всегда комбинировать клиентскую и серверную валидацию для безопасности.
  • Для больших файлов использовать прогресс-бар, чтобы пользователь видел процесс загрузки.
  • При множественной загрузке создавать массив валидных файлов перед добавлением в состояние.
  • Использовать кастомные коллбэки для сложных правил (например, проверка содержимого файлов или уникальности по имени).
  • При необходимости локализовать тексты ошибок через свойства invalidFileText и invalidFileTextBody.

Эти механизмы делают компонент FileUploader Carbon Components Svelte мощным инструментом для безопасной и удобной работы с файлами в веб-приложениях.

Оглавление