feat(ui): set preview via drag and drop on model cards (#1034)

locales/de.json

@@ -2190,6 +2190,7 @@
             "fileRenameFailed": "Fehler beim Umbenennen der Datei: {error}",
             "previewUpdated": "Vorschau erfolgreich aktualisiert",
             "previewUploadFailed": "Fehler beim Hochladen des Vorschaubilds",
+            "previewDropInvalid": "Nicht unterstützter Dateityp: {name}. Ziehen Sie stattdessen ein Bild oder ein MP4-Video hinein.",
             "refreshComplete": "{action} abgeschlossen",
             "refreshFailed": "Fehler beim {action} der {type}s",
             "metadataRefreshed": "Metadaten erfolgreich aktualisiert",

locales/en.json

@@ -2190,6 +2190,7 @@
       "fileRenameFailed": "Failed to rename file: {error}",
       "previewUpdated": "Preview updated successfully",
       "previewUploadFailed": "Failed to upload preview image",
+      "previewDropInvalid": "Unsupported file type: {name}. Drop an image or MP4 video instead.",
       "refreshComplete": "{action} complete",
       "refreshFailed": "Failed to {action} {type}s",
       "metadataRefreshed": "Metadata refreshed successfully",

locales/es.json

@@ -2190,6 +2190,7 @@
             "fileRenameFailed": "Error al renombrar archivo: {error}",
             "previewUpdated": "Vista previa actualizada exitosamente",
             "previewUploadFailed": "Error al subir imagen de vista previa",
+            "previewDropInvalid": "Tipo de archivo no admitido: {name}. Arrastra una imagen o un video MP4 en su lugar.",
             "refreshComplete": "{action} completada",
             "refreshFailed": "Error al {action} {type}s",
             "metadataRefreshed": "Metadatos actualizados exitosamente",

locales/fr.json

@@ -2190,6 +2190,7 @@
             "fileRenameFailed": "Échec du renommage du fichier : {error}",
             "previewUpdated": "Aperçu mis à jour avec succès",
             "previewUploadFailed": "Échec du téléchargement de l'image d'aperçu",
+            "previewDropInvalid": "Type de fichier non pris en charge : {name}. Déposez plutôt une image ou une vidéo MP4.",
             "refreshComplete": "{action} terminé",
             "refreshFailed": "Échec de {action} des {type}s",
             "metadataRefreshed": "Métadonnées actualisées avec succès",

locales/he.json

@@ -2190,6 +2190,7 @@
             "fileRenameFailed": "שינוי שם הקובץ נכשל: {error}",
             "previewUpdated": "התצוגה המקדימה עודכנה בהצלחה",
             "previewUploadFailed": "העלאת תמונת התצוגה המקדימה נכשלה",
+            "previewDropInvalid": "סוג קובץ לא נתמך: {name}. גרור במקום זאת תמונה או סרטון MP4.",
             "refreshComplete": "{action} הושלם",
             "refreshFailed": "{action} של {type}s נכשל",
             "metadataRefreshed": "המטא-דאטה רועננה בהצלחה",

locales/ja.json

@@ -2190,6 +2190,7 @@
             "fileRenameFailed": "ファイル名の変更に失敗しました：{error}",
             "previewUpdated": "プレビューが正常に更新されました",
             "previewUploadFailed": "プレビュー画像のアップロードに失敗しました",
+            "previewDropInvalid": "サポートされていないファイル形式：{name}。画像またはMP4ビデオをドロップしてください。",
             "refreshComplete": "{action} 完了",
             "refreshFailed": "{type}の{action}に失敗しました",
             "metadataRefreshed": "メタデータが正常に更新されました",

locales/ko.json

@@ -2190,6 +2190,7 @@
             "fileRenameFailed": "파일 이름 변경 실패: {error}",
             "previewUpdated": "미리보기가 성공적으로 업데이트되었습니다",
             "previewUploadFailed": "미리보기 이미지 업로드 실패",
+            "previewDropInvalid": "지원되지 않는 파일 형식: {name}. 이미지 또는 MP4 동영상을 드롭하세요.",
             "refreshComplete": "{action} 완료",
             "refreshFailed": "{type} {action} 실패",
             "metadataRefreshed": "메타데이터가 성공적으로 새로고침되었습니다",

locales/ru.json

@@ -2190,6 +2190,7 @@
             "fileRenameFailed": "Не удалось переименовать файл: {error}",
             "previewUpdated": "Превью успешно обновлено",
             "previewUploadFailed": "Не удалось загрузить превью изображение",
+            "previewDropInvalid": "Неподдерживаемый тип файла: {name}. Перетащите вместо этого изображение или видео MP4.",
             "refreshComplete": "{action} завершено",
             "refreshFailed": "Не удалось {action} {type}s",
             "metadataRefreshed": "Метаданные успешно обновлены",

locales/zh-CN.json

@@ -2190,6 +2190,7 @@
             "fileRenameFailed": "重命名文件失败：{error}",
             "previewUpdated": "预览图片更新成功",
             "previewUploadFailed": "上传预览图片失败",
+            "previewDropInvalid": "不支持的文件类型：{name}。请拖入图片或 MP4 视频。",
             "refreshComplete": "{action} 完成",
             "refreshFailed": "{action} {type} 失败",
             "metadataRefreshed": "元数据刷新成功",

locales/zh-TW.json

@@ -2190,6 +2190,7 @@
             "fileRenameFailed": "重新命名檔案失敗：{error}",
             "previewUpdated": "預覽圖片已成功更新",
             "previewUploadFailed": "上傳預覽圖片失敗",
+            "previewDropInvalid": "不支援的檔案類型：{name}。請拖入圖片或 MP4 影片。",
             "refreshComplete": "{action} 完成",
             "refreshFailed": "{action} {type} 失敗",
             "metadataRefreshed": "metadata 已成功刷新",

static/css/components/card.css

@@ -41,6 +41,11 @@
     border-color: var(--lora-accent);
 }
 
+.model-card.drag-over {
+    outline: 2px dashed var(--lora-accent);
+    outline-offset: -2px;
+}
+
 .model-card:focus-visible {
     outline: 2px solid var(--lora-accent);
     outline-offset: 2px;

static/js/components/shared/ModelCard.js

@@ -741,6 +741,46 @@ export function createModelCard(model, modelType) {
         configureModelCardVideo(videoElement, autoplayOnHover);
     }
 
+    // Dropping an image/video onto the card replaces the model preview via the
+    // existing replace-preview endpoint (overwrites file on disk, refreshes card).
+    const preventDragDefaults = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+    };
+
+    ['dragenter', 'dragover'].forEach((eventName) => {
+        card.addEventListener(eventName, (event) => {
+            preventDragDefaults(event);
+            card.classList.add('drag-over');
+        });
+    });
+
+    card.addEventListener('dragleave', (event) => {
+        preventDragDefaults(event);
+        card.classList.remove('drag-over');
+    });
+
+    card.addEventListener('drop', (event) => {
+        preventDragDefaults(event);
+        card.classList.remove('drag-over');
+
+        const files = event.dataTransfer?.files;
+        if (!files || files.length === 0) return;
+
+        const file = files[0];
+        // Keep in sync with the accept list of the preview file picker (image/* + video/mp4).
+        if (!file.type.startsWith('image/') && file.type !== 'video/mp4') {
+            showToast('toast.api.previewDropInvalid', { name: file.name || '' }, 'error');
+            return;
+        }
+
+        const filePath = card.dataset.filepath;
+        if (!filePath) return;
+
+        // uploadPreview handles loading state, card refresh and error toasts internally.
+        getModelApiClient().uploadPreview(filePath, file);
+    });
+
     return card;
 }
 

tests/frontend/components/modelCard.previewDrop.test.js

@@ -0,0 +1,182 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+const {
+  MODEL_CARD_MODULE,
+  STATE_MODULE,
+  UI_HELPERS_MODULE,
+  I18N_MODULE,
+  API_CONFIG_MODULE,
+  API_FACTORY_MODULE,
+} = vi.hoisted(() => ({
+  MODEL_CARD_MODULE: new URL('../../../static/js/components/shared/ModelCard.js', import.meta.url).pathname,
+  STATE_MODULE: new URL('../../../static/js/state/index.js', import.meta.url).pathname,
+  UI_HELPERS_MODULE: new URL('../../../static/js/utils/uiHelpers.js', import.meta.url).pathname,
+  I18N_MODULE: new URL('../../../static/js/utils/i18nHelpers.js', import.meta.url).pathname,
+  API_CONFIG_MODULE: new URL('../../../static/js/api/apiConfig.js', import.meta.url).pathname,
+  API_FACTORY_MODULE: new URL('../../../static/js/api/modelApiFactory.js', import.meta.url).pathname,
+}));
+
+const showToastMock = vi.fn();
+const uploadPreviewMock = vi.fn();
+
+vi.mock(STATE_MODULE, () => ({
+  state: {
+    settings: {
+      blur_mature_content: false,
+      model_name_display: 'model_name',
+    },
+    global: {
+      settings: {
+        model_name_display: 'model_name',
+        group_by_model: false,
+        display_density: 'default',
+        model_card_footer_action: 'replace_preview',
+      },
+    },
+    pages: {
+      loras: {
+        previewVersions: new Map(),
+        sortBy: 'name',
+      },
+    },
+    bulkMode: false,
+    selectedLoras: new Set(),
+  },
+  getCurrentPageState: vi.fn(() => ({
+    sortBy: 'name',
+    previewVersions: new Map(),
+  })),
+}));
+
+vi.mock(UI_HELPERS_MODULE, () => ({
+  showToast: showToastMock,
+  openCivitai: vi.fn(),
+  openHuggingFace: vi.fn(),
+  copyToClipboard: vi.fn(),
+  copyLoraSyntax: vi.fn(),
+  sendLoraToWorkflow: vi.fn(),
+  sendEmbeddingToWorkflow: vi.fn(),
+  openExampleImagesFolder: vi.fn(),
+  buildLoraSyntax: vi.fn(),
+  sendModelPathToWorkflow: vi.fn(),
+}));
+
+vi.mock(I18N_MODULE, () => ({
+  translate: vi.fn((key) => key),
+}));
+
+vi.mock(API_CONFIG_MODULE, () => ({
+  MODEL_TYPES: { LORA: 'loras', CHECKPOINT: 'checkpoints', EMBEDDING: 'embeddings' },
+}));
+
+vi.mock(API_FACTORY_MODULE, () => ({
+  getModelApiClient: vi.fn(() => ({ uploadPreview: uploadPreviewMock })),
+}));
+
+describe('ModelCard drag & drop preview upload', () => {
+  let createModelCard;
+
+  beforeEach(async () => {
+    showToastMock.mockReset();
+    uploadPreviewMock.mockReset();
+    ({ createModelCard } = await import(MODEL_CARD_MODULE));
+  });
+
+  function createCard() {
+    const model = {
+      sha256: 'abc123',
+      file_path: '/models/test_lora.safetensors',
+      model_name: 'Test LoRA',
+      file_name: 'test_lora',
+      folder: 'models',
+      modified: 1234567890,
+      file_size: 1024,
+      usage_count: 0,
+      notes: '',
+      base_model: 'SD1.5',
+      favorite: false,
+      exclude: false,
+      hf_url: '',
+      update_available: false,
+      skip_metadata_refresh: false,
+      preview_url: '',
+      preview_nsfw_level: 0,
+      tags: [],
+      civitai: {},
+      sub_type: 'lora',
+    };
+    return createModelCard(model, 'loras');
+  }
+
+  function dispatchDrop(card, files) {
+    const event = new Event('drop', { bubbles: true, cancelable: true });
+    Object.defineProperty(event, 'dataTransfer', { value: { files } });
+    card.dispatchEvent(event);
+    return event;
+  }
+
+  it('uploads the dropped image as the model preview', () => {
+    const card = createCard();
+    const file = new File(['data'], 'preview.png', { type: 'image/png' });
+
+    dispatchDrop(card, [file]);
+
+    expect(uploadPreviewMock).toHaveBeenCalledTimes(1);
+    expect(uploadPreviewMock).toHaveBeenCalledWith('/models/test_lora.safetensors', file);
+  });
+
+  it('supports MP4 video files', () => {
+    const card = createCard();
+    const file = new File(['data'], 'preview.mp4', { type: 'video/mp4' });
+
+    dispatchDrop(card, [file]);
+
+    expect(uploadPreviewMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('rejects unsupported file types with a toast', () => {
+    const card = createCard();
+    const file = new File(['data'], 'notes.txt', { type: 'text/plain' });
+
+    dispatchDrop(card, [file]);
+
+    expect(uploadPreviewMock).not.toHaveBeenCalled();
+    expect(showToastMock).toHaveBeenCalledWith(
+      'toast.api.previewDropInvalid',
+      { name: 'notes.txt' },
+      'error'
+    );
+  });
+
+  it('ignores drops without files', () => {
+    const card = createCard();
+
+    dispatchDrop(card, []);
+
+    expect(uploadPreviewMock).not.toHaveBeenCalled();
+  });
+
+  it('prevents browser default and highlights the card while dragging over', () => {
+    const card = createCard();
+
+    const dragOverEvent = new Event('dragover', { bubbles: true, cancelable: true });
+    card.dispatchEvent(dragOverEvent);
+    expect(dragOverEvent.defaultPrevented).toBe(true);
+    expect(card.classList.contains('drag-over')).toBe(true);
+
+    const dragLeaveEvent = new Event('dragleave', { bubbles: true, cancelable: true });
+    card.dispatchEvent(dragLeaveEvent);
+    expect(dragLeaveEvent.defaultPrevented).toBe(true);
+    expect(card.classList.contains('drag-over')).toBe(false);
+  });
+
+  it('clears the highlight when the drop completes', () => {
+    const card = createCard();
+    const file = new File(['data'], 'preview.png', { type: 'image/png' });
+
+    const event = dispatchDrop(card, [file]);
+
+    expect(event.defaultPrevented).toBe(true);
+    expect(card.classList.contains('drag-over')).toBe(false);
+  });
+});