Файловый менеджер

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

📁 Файловый менеджер

Панель управления → Файловый менеджер

Управление файлами и изображениями сайта: загрузка, просмотр, переименование, удаление, копирование ссылок.


🎯 Возможности

Режимы отображения

Файлы можно просматривать в двух режимах — переключение сохраняется в браузере:

Режим Как выглядит
Сетка (по умолчанию) Иконки-карточки, миниатюры для изображений
Таблица Строки с колонками: имя, размер, дата изменения, действия

Переключение — кнопки в верхней панели:

[⊞ Сетка] [☰ Таблица]

Пагинация

При большом количестве файлов в папке включается постраничная навигация:

  • 10 / 20 / 50 файлов на страницу — выбирается в верхней панели
  • Номера страниц внизу с переходом к первой/последней
  • Счётчик: «1–10 из 115»

Действия с файлами

Наведите на файл/папку — появятся кнопки:

  • ✏️ Переименовать — автоматически транслитерирует русские названия
  • 🔗 Копировать ссылку — URL файла копируется в буфер обмена
  • 🗑 Удалить — с подтверждением

Навигация по папкам

  • Сетка: двойной клик по папке → переход внутрь
  • Таблица: одинарный клик по папке → переход внутрь
  • Хлебные крошки: путь вверху, клик по любой части — переход
  • Клик по файлу (в сетке) → выделение синим
  • Двойной клик по файлу → информация о файле (размер, дата, размеры для изображений)

📤 Загрузка файлов

  1. Кнопка «Загрузить файл» в правом верхнем углу
  2. Выберите файл (до 5 МБ)
  3. Разрешённые типы: jpg, jpeg, png, gif, webp, svg, pdf, doc, docx, txt, xls, xlsx, zip
  4. Файл загружается в текущую папку

Русские имена файлов автоматически транслитерируются в латиницу.


📂 Создание папок

Кнопка «Создать папку» → введите название (только латиница, цифры, дефисы, подчёркивания).


🖼 Превью изображений

Превьюшка в сетке (64×64) не грузит оригинал — она создаётся на лету через сервер (Imagick):

  • Оригинал 450 КБ → превью ~4 КБ
  • Кэшируется браузером (ETag) — при повторном просмотре загрузка не нужна
  • Атрибут loading="lazy" — невидимые картинки загружаются только при скролле

Результат: сетка из 10 картинок грузит ~40 КБ вместо 4.5 МБ.


🔧 Режимы отображения (детали)

Сетка

  • Изображения: миниатюра + имя файла + размер
  • Папки: жёлтая иконка папки + имя + подпись «Папка»
  • Другие файлы: синяя иконка файла + имя + размер

Таблица

  • Иконка/миниатюра + имя в первой колонке
  • Размер (скрывается на узких экранах)
  • Дата изменения (скрывается на мобильных)
  • Кнопки действий справа
  • Строка подсвечивается синим при клике