Выбор файлов и медиа

Tom Select применяется в сценариях работы с файлами и медиа как слой пользовательского интерфейса поверх данных, представляющих элементы медиатеки или файловой системы. Вместо прямого взаимодействия с <input type="file"> или статичными списками, компонент используется для построения расширенного выбора: с поиском, группировкой, предпросмотром и асинхронной подгрузкой метаданных.

В основе подхода лежит трансформация файловой структуры в набор опций. Каждый файл становится объектом с набором полей:

  • идентификатор (id или path)
  • имя файла
  • тип (image, video, audio, document)
  • размер
  • ссылка на превью (thumbnail)
  • дополнительные метаданные (дата загрузки, автор, статус обработки)

Tom Select работает с такими структурами через стандартные options, где value соответствует уникальному идентификатору, а text используется как человекочитаемое имя.

Пример логики данных:

{
  value: "file_1024",
  text: "forest_photo.jpg",
  type: "image",
  size: 204800,
  thumbnail: "/thumbs/forest_photo.jpg"
}

При таком подходе файловый список перестает быть плоским перечислением и превращается в интерактивную медиатеку.

Инициализация выбора медиаресурсов

Базовая конфигурация Tom Select для работы с файлами опирается на множественный выбор и кастомные шаблоны отображения:

new TomSelect("#media-select", {
  maxItems: null,
  valueField: "value",
  labelField: "text",
  searchField: ["text", "type"],
  options: [],
  render: {}
});

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

Кастомный рендеринг медиа-элементов

Работа с медиа требует визуального представления, выходящего за рамки текста. Поэтому используется кастомизация render:

render: {
  option: function(data, escape) {
    return `
      <div class="media-option">
        <img src="${escape(data.thumbnail)}" />
        <div class="media-info">
          <div class="title">${escape(data.text)}</div>
          <div class="meta">${escape(data.type)} • ${escape(data.size)}</div>
        </div>
      </div>
    `;
  },
  item: function(data, escape) {
    return `
      <div class="media-item">
        ${escape(data.text)}
      </div>
    `;
  }
}

Такой подход превращает выпадающий список в полноценный медиабраузер, где каждый элемент имеет визуальный контекст.

Группировка изображений, видео и аудио

При работе с большими медиатеками важна структуризация. Элементы группируются по типу:

  • изображения
  • видео
  • аудио
  • документы

Внутри Tom Select это реализуется через optgroup, что позволяет визуально разделять категории:

optgroups: [
  { value: "images", label: "Изображения" },
  { value: "videos", label: "Видео" },
  { value: "audio", label: "Аудио" }
]

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

Асинхронная загрузка медиатеки

Медиа редко хранится в статическом виде на клиенте. Чаще данные загружаются через API. Tom Select поддерживает режим удаленного поиска:

load: function(query, callback) {
  fetch(`/api/media?q=${encodeURIComponent(query)}`)
    .then(res => res.json())
    .then(data => callback(data))
    .catch(() => callback());
}

Такой механизм позволяет реализовать серверный поиск по:

  • названию файла
  • тегам
  • типу медиа
  • пользователю или проекту

При масштабных библиотеках это критично, так как клиент не хранит весь список файлов.

Поиск и фильтрация по метаданным

Поисковый механизм расширяется за счет поля searchField. Для медиа это особенно важно, так как один объект может иметь множество атрибутов:

  • название
  • расширение
  • MIME-тип
  • пользовательские теги
searchField: ["text", "type", "tags"]

Таким образом поиск по запросу «jpg» или «видео» возвращает релевантные элементы без дополнительной логики.

Предпросмотр и визуальные метки

Медиасценарии требуют моментального визуального отклика. Элементы списка дополняются:

  • миниатюрами изображений
  • иконками форматов
  • индикаторами состояния (загружено, обрабатывается, ошибка)
  • размером файла

Дополнительные поля не влияют на выбор, но повышают информативность интерфейса.

Внутри render можно добавлять условную логику:

if (data.type === "video") {
  // отображение иконки воспроизведения
}

Интеграция с File API и загрузкой

Хотя Tom Select не занимается загрузкой файлов напрямую, он часто используется как слой выбора перед загрузкой.

Типичный поток:

  1. Пользователь выбирает файлы в селекте
  2. Получаются идентификаторы или Blob-метаданные
  3. Далее используется File API или FormData
  4. Файлы отправляются на сервер

Пример связки:

const selected = select.getValue();

const formData = new FormData();
selected.forEach(id => formData.append("files[]", id));

fetch("/upload", {
  method: "POST",
  body: formData
});

Работа с локальными объектами и preview до загрузки

В случаях, когда файлы выбираются напрямую с устройства, создаются временные URL:

const url = URL.createObjectURL(file);

Эти ссылки можно передавать в options как thumbnail, позволяя отображать предпросмотр до загрузки на сервер.

Ограничения и контроль выбора

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

  • максимальное количество файлов
  • допустимые типы
  • максимальный размер
  • запрет дубликатов

В Tom Select это реализуется через onItemAdd и onChange:

onItemAdd: function(value) {
  if (this.items.length > 10) {
    this.removeItem(value);
  }
}

Такая логика позволяет контролировать бизнес-правила без изменения серверной части.

Производительность при больших медиатеках

При тысячах файлов ключевыми становятся:

  • виртуализация загрузки через load
  • ограничение DOM-элементов
  • debounce поиска
  • кеширование результатов

Особенно критично не перегружать клиент полным списком, а работать через пагинированные API-ответы.

Расширенные сценарии: теги и коллекции медиа

Медиа редко существует изолированно. Часто применяется система коллекций:

  • альбомы изображений
  • подборки видео
  • тематические наборы аудио

Каждый элемент может принадлежать нескольким коллекциям, что удобно реализуется через множественный выбор Tom Select с тегированием.

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

Оглавление