VGFiles

<div class="vg-files project-files"
     data-ajax="true"
     data-smartdrop="true"
     data-limits-count="12"
     data-limits-sizes="8"
     data-limits-total="64"
     data-types='["image/jpeg", "image/png", "image/webp"]'
     data-uploads-route="/api/files/upload"
     data-uploads-mode="parallel"
     data-uploads-max-parallel="3"
     data-removes-single-route="/api/files/remove"
     data-removes-all-route="/api/files/clear"
     data-sortable-enabled="true"
     data-sortable-route="/api/files/sort">
  <div class="vg-files-stat">
    <span class="vg-files-stat-count"></span>
    <div class="vg-files-stat-progress"></div>
  </div>
  <label class="vg-files-drop" for="project-files">
    <span class="vg-files-drop-message show">
      <span class="title">Перетащите файлы</span>
    </span>
    <ul class="vg-files-drop--list"></ul>
  </label>
  <input id="project-files" type="file" name="files[]"
         accept="image/jpeg,image/png,image/webp"
         data-vg-toggle="files" multiple>
</div>

import { VGFiles } from 'vgapp';

const root = document.querySelector('#project-files-widget');
const files = new VGFiles(root, {
  ajax: true,
  smartdrop: true,
  rename: true,
  limits: { count: 12, sizes: 8, total: 64 },
  types: ['image/jpeg', 'image/png', 'image/webp'],
  uploads: {
    route: '/api/files/upload',
    mode: 'parallel',
    maxParallel: 3,
    retryAttempts: 2,
    retryDelay: 1200,
  },
  removes: {
    single: { route: '/api/files/remove', alert: true, toast: true },
    all: { route: '/api/files/clear', alert: true, toast: true },
  },
  sortable: { enabled: true, route: '/api/files/sort', handle: '.file' },
});

// Получение и завершение существующего экземпляра
VGFiles.getInstance(root);
files.clear();
files.dispose();

// POST /api/files/upload — multipart/form-data, поле file
const uploadResponse = { id: 418, message: 'Файл загружен' };

// DELETE /api/files/remove?id=418
const removeResponse = { message: 'Файл удалён' };

// POST /api/files/sort
const sortRequest = { ids: [418, 205, 731] };

.project-files {
  --vg-files-label-bg: var(--vg-primary);
  --vg-files-label-color: #fff;
  --vg-files-label-border-radius: 8px;
  --vg-files-label-padding: 10px 20px;

  --vg-files-drop-height: 320px;
  --vg-files-drop-bg: var(--vg-surface-muted-bg);
  --vg-files-drop-border-color: var(--vg-border-default);
  --vg-files-drop-hover-border-color: var(--vg-primary);
  --vg-files-drop-radius: 12px;
  --vg-files-drop-file-height: 180px;
  --vg-files-drop-file-flex: calc(33.333% - 6px);
  --vg-files-drop-remove-size: 30px;
  --vg-files-drop-control-icon-size: 16px;

  --vg-files-info-list-max-height: 420px;
  --vg-files-info-hover-bg: var(--vg-surface-muted-bg);
  --vg-files-info-name-font-size: 15px;
  --vg-files-stat-border-color: var(--vg-border-default);
}