feat(recipes): redesign import modal with URL-first input and unified drop zone

2026-08-21 13:01:27 -03:00 · 2026-08-21 00:01:50 +08:00
parent 86aa1d8059
commit 45e7c25308
15 changed files with 270 additions and 154 deletions
@@ -860,14 +860,12 @@
            "import": {
                "action": "Importieren",
                "title": "Ein Rezept aus Bild oder URL importieren",
-                "urlLocalPath": "URL / Lokaler Pfad",
-                "uploadImage": "Bild hochladen",
-                "urlSectionDescription": "Geben Sie eine Civitai-Bild-URL oder einen lokalen Dateipfad ein, um es als Rezept zu importieren.",
+                "dropZoneLabel": "Bild hochladen",
+                "dropZoneHint": "Bild hierher ziehen, aus der Zwischenablage einfügen oder klicken zum Durchsuchen",
+                "orDivider": "oder Bild per Drag & Drop / Einfügen hinzufügen",
                "imageUrlOrPath": "Bild-URL oder Dateipfad:",
                "urlPlaceholder": "https://civitai.com/images/... oder C:/pfad/zu/bild.png",
                "fetchImage": "Bild abrufen",
-                "uploadSectionDescription": "Laden Sie ein Bild mit LoRA-Metadaten hoch, um es als Rezept zu importieren.",
-                "selectImage": "Bild auswählen",
                "recipeName": "Rezeptname",
                "recipeNamePlaceholder": "Rezeptname eingeben",
                "tagsOptional": "Tags (optional)",
@@ -912,6 +910,8 @@
                "errors": {
                    "selectImageFile": "Bitte wählen Sie eine Bilddatei aus",
                    "enterUrlOrPath": "Bitte geben Sie eine URL oder einen Dateipfad ein",
+                    "invalidUrl": "Bitte geben Sie eine gültige URL ein",
+                    "invalidInputFormat": "Bitte geben Sie eine Bild-URL oder einen lokalen Bilddateipfad ein",
                    "selectLoraRoot": "Bitte wählen Sie ein LoRA-Stammverzeichnis aus"
                }
            },
@@ -860,14 +860,12 @@
      "import": {
        "action": "Import",
        "title": "Import a recipe from image or URL",
-        "urlLocalPath": "URL / Local Path",
-        "uploadImage": "Upload Image",
-        "urlSectionDescription": "Input a Civitai image URL from civitai.com or civitai.red, or a local file path, to import as a recipe.",
+        "dropZoneLabel": "Upload image",
+        "dropZoneHint": "Drag & drop an image here, paste from clipboard, or click to browse",
+        "orDivider": "or drag & drop / paste an image",
        "imageUrlOrPath": "Image URL or File Path:",
        "urlPlaceholder": "https://civitai.com/images/... or https://civitai.red/images/... or C:/path/to/image.png",
        "fetchImage": "Fetch Image",
-        "uploadSectionDescription": "Upload an image with LoRA metadata to import as a recipe.",
-        "selectImage": "Select Image",
        "recipeName": "Recipe Name",
        "recipeNamePlaceholder": "Enter recipe name",
        "tagsOptional": "Tags (optional)",
@@ -912,6 +910,8 @@
        "errors": {
          "selectImageFile": "Please select an image file",
          "enterUrlOrPath": "Please enter a URL or file path",
+          "invalidUrl": "Please enter a valid URL",
+          "invalidInputFormat": "Please enter an image URL or a local image file path",
          "selectLoraRoot": "Please select a LoRA root directory"
        }
      },
@@ -860,14 +860,12 @@
            "import": {
                "action": "Importar",
                "title": "Importar una receta desde imagen o URL",
-                "urlLocalPath": "URL / Ruta local",
-                "uploadImage": "Subir imagen",
-                "urlSectionDescription": "Introduce una URL de imagen de Civitai o ruta de archivo local para importar como receta.",
+                "dropZoneLabel": "Subir imagen",
+                "dropZoneHint": "Arrastra y suelta una imagen aquí, pégala desde el portapapeles o haz clic para examinar",
+                "orDivider": "o arrastra y suelta / pega una imagen",
                "imageUrlOrPath": "URL de imagen o ruta de archivo:",
                "urlPlaceholder": "https://civitai.com/images/... o C:/ruta/a/imagen.png",
                "fetchImage": "Obtener imagen",
-                "uploadSectionDescription": "Sube una imagen con metadatos de LoRA para importar como receta.",
-                "selectImage": "Seleccionar imagen",
                "recipeName": "Nombre de receta",
                "recipeNamePlaceholder": "Introduce nombre de receta",
                "tagsOptional": "Etiquetas (opcional)",
@@ -912,6 +910,8 @@
                "errors": {
                    "selectImageFile": "Por favor selecciona un archivo de imagen",
                    "enterUrlOrPath": "Por favor introduce una URL o ruta de archivo",
+                    "invalidUrl": "Introduce una URL válida",
+                    "invalidInputFormat": "Introduce la URL de una imagen o una ruta de archivo local",
                    "selectLoraRoot": "Por favor selecciona un directorio raíz de LoRA"
                }
            },
@@ -860,14 +860,12 @@
            "import": {
                "action": "Importer",
                "title": "Importer une recipe depuis une image ou une URL",
-                "urlLocalPath": "URL / Chemin local",
-                "uploadImage": "Téléverser une image",
-                "urlSectionDescription": "Saisissez une URL d'image Civitai ou un chemin de fichier local pour l'importer comme recipe.",
+                "dropZoneLabel": "Téléverser une image",
+                "dropZoneHint": "Glissez-déposez une image ici, collez-la depuis le presse-papiers ou cliquez pour parcourir",
+                "orDivider": "ou glissez-déposez / collez une image",
                "imageUrlOrPath": "URL d'image ou chemin de fichier :",
                "urlPlaceholder": "https://civitai.com/images/... ou C:/chemin/vers/image.png",
                "fetchImage": "Récupérer l'image",
-                "uploadSectionDescription": "Téléversez une image avec des métadonnées LoRA pour l'importer comme recipe.",
-                "selectImage": "Sélectionner une image",
                "recipeName": "Nom de la recipe",
                "recipeNamePlaceholder": "Entrez le nom de la recipe",
                "tagsOptional": "Tags (optionnel)",
@@ -912,6 +910,8 @@
                "errors": {
                    "selectImageFile": "Veuillez sélectionner un fichier image",
                    "enterUrlOrPath": "Veuillez entrer une URL ou un chemin de fichier",
+                    "invalidUrl": "Veuillez saisir une URL valide",
+                    "invalidInputFormat": "Veuillez saisir l'URL d'une image ou un chemin de fichier local",
                    "selectLoraRoot": "Veuillez sélectionner un répertoire racine LoRA"
                }
            },
@@ -860,14 +860,12 @@
            "import": {
                "action": "ייבא",
                "title": "ייבא מתכון מתמונה או כתובת URL",
-                "urlLocalPath": "URL / נתיב מקומי",
-                "uploadImage": "העלה תמונה",
-                "urlSectionDescription": "הזן כתובת URL של תמונה מ-Civitai או נתיב קובץ מקומי לייבוא כמתכון.",
+                "dropZoneLabel": "העלאת תמונה",
+                "dropZoneHint": "גררו ושחררו תמונה כאן, הדביקו מהלוח או לחצו לעיון",
+                "orDivider": "או גררו ושחררו / הדביקו תמונה",
                "imageUrlOrPath": "URL של תמונה או נתיב קובץ:",
                "urlPlaceholder": "https://civitai.com/images/... או C:/path/to/image.png",
                "fetchImage": "אחזר תמונה",
-                "uploadSectionDescription": "העלה תמונה עם מטא-דאטה של LoRA לייבוא כמתכון.",
-                "selectImage": "בחר תמונה",
                "recipeName": "שם המתכון",
                "recipeNamePlaceholder": "הזן שם מתכון",
                "tagsOptional": "תגיות (אופציונלי)",
@@ -912,6 +910,8 @@
                "errors": {
                    "selectImageFile": "אנא בחר קובץ תמונה",
                    "enterUrlOrPath": "אנא הזן URL או נתיב קובץ",
+                    "invalidUrl": "נא להזין כתובת URL תקינה",
+                    "invalidInputFormat": "נא להזין כתובת URL של תמונה או נתיב קובץ מקומי",
                    "selectLoraRoot": "אנא בחר ספריית שורש של LoRA"
                }
            },
@@ -860,14 +860,12 @@
            "import": {
                "action": "インポート",
                "title": "画像またはURLからレシピをインポート",
-                "urlLocalPath": "URL / ローカルパス",
-                "uploadImage": "画像をアップロード",
-                "urlSectionDescription": "Civitai画像URLまたはローカルファイルパスを入力してレシピとしてインポートします。",
+                "dropZoneLabel": "画像をアップロード",
+                "dropZoneHint": "画像をここにドラッグ＆ドロップ、クリップボードから貼り付け、またはクリックして参照",
+                "orDivider": "または画像をドラッグ＆ドロップ / 貼り付け",
                "imageUrlOrPath": "画像URLまたはファイルパス：",
                "urlPlaceholder": "https://civitai.com/images/... または C:/path/to/image.png",
                "fetchImage": "画像を取得",
-                "uploadSectionDescription": "LoRAメタデータを含む画像をアップロードしてレシピとしてインポートします。",
-                "selectImage": "画像を選択",
                "recipeName": "レシピ名",
                "recipeNamePlaceholder": "レシピ名を入力",
                "tagsOptional": "タグ（任意）",
@@ -912,6 +910,8 @@
                "errors": {
                    "selectImageFile": "画像ファイルを選択してください",
                    "enterUrlOrPath": "URLまたはファイルパスを入力してください",
+                    "invalidUrl": "有効なURLを入力してください",
+                    "invalidInputFormat": "画像のURLまたはローカルの画像ファイルパスを入力してください",
                    "selectLoraRoot": "LoRAルートディレクトリを選択してください"
                }
            },
@@ -860,14 +860,12 @@
            "import": {
                "action": "가져오기",
                "title": "이미지 또는 URL에서 레시피 가져오기",
-                "urlLocalPath": "URL / 로컬 경로",
-                "uploadImage": "이미지 업로드",
-                "urlSectionDescription": "Civitai 이미지 URL 또는 로컬 파일 경로를 입력하여 레시피로 가져옵니다.",
+                "dropZoneLabel": "이미지 업로드",
+                "dropZoneHint": "이미지를 여기에 끌어다 놓거나, 클립보드에서 붙여넣거나, 클릭하여 찾아보세요",
+                "orDivider": "또는 이미지를 끌어다 놓기 / 붙여넣기",
                "imageUrlOrPath": "이미지 URL 또는 파일 경로:",
                "urlPlaceholder": "https://civitai.com/images/... 또는 C:/path/to/image.png",
                "fetchImage": "이미지 가져오기",
-                "uploadSectionDescription": "LoRA 메타데이터가 포함된 이미지를 업로드하여 레시피로 가져옵니다.",
-                "selectImage": "이미지 선택",
                "recipeName": "레시피 이름",
                "recipeNamePlaceholder": "레시피 이름을 입력하세요",
                "tagsOptional": "태그 (선택사항)",
@@ -912,6 +910,8 @@
                "errors": {
                    "selectImageFile": "이미지 파일을 선택해주세요",
                    "enterUrlOrPath": "URL 또는 파일 경로를 입력해주세요",
+                    "invalidUrl": "유효한 URL을 입력하세요",
+                    "invalidInputFormat": "이미지 URL 또는 로컬 이미지 파일 경로를 입력하세요",
                    "selectLoraRoot": "LoRA 루트 디렉토리를 선택해주세요"
                }
            },
@@ -860,14 +860,12 @@
            "import": {
                "action": "Импортировать",
                "title": "Импортировать рецепт из изображения или URL",
-                "urlLocalPath": "URL / Локальный путь",
-                "uploadImage": "Загрузить изображение",
-                "urlSectionDescription": "Введите URL изображения Civitai или локальный путь к файлу для импорта в качестве рецепта.",
+                "dropZoneLabel": "Загрузить изображение",
+                "dropZoneHint": "Перетащите изображение сюда, вставьте из буфера обмена или нажмите для выбора",
+                "orDivider": "или перетащите / вставьте изображение",
                "imageUrlOrPath": "URL изображения или путь к файлу:",
                "urlPlaceholder": "https://civitai.com/images/... или C:/path/to/image.png",
                "fetchImage": "Получить изображение",
-                "uploadSectionDescription": "Загрузите изображение с метаданными LoRA для импорта в качестве рецепта.",
-                "selectImage": "Выбрать изображение",
                "recipeName": "Название рецепта",
                "recipeNamePlaceholder": "Введите название рецепта",
                "tagsOptional": "Теги (необязательно)",
@@ -912,6 +910,8 @@
                "errors": {
                    "selectImageFile": "Пожалуйста, выберите файл изображения",
                    "enterUrlOrPath": "Пожалуйста, введите URL или путь к файлу",
+                    "invalidUrl": "Введите корректный URL",
+                    "invalidInputFormat": "Введите URL изображения или путь к локальному файлу изображения",
                    "selectLoraRoot": "Пожалуйста, выберите корневую папку LoRA"
                }
            },
@@ -860,14 +860,12 @@
            "import": {
                "action": "导入",
                "title": "从图片或 URL 导入配方",
-                "urlLocalPath": "URL / 本地路径",
-                "uploadImage": "上传图片",
-                "urlSectionDescription": "输入来自 civitai.com 或 civitai.red 的 Civitai 图片 URL，或本地文件路径以导入为配方。",
+                "dropZoneLabel": "上传图片",
+                "dropZoneHint": "将图片拖拽到此处、从剪贴板粘贴，或点击浏览",
+                "orDivider": "或拖拽 / 粘贴图片",
                "imageUrlOrPath": "图片 URL 或文件路径：",
                "urlPlaceholder": "https://civitai.com/images/... 或 https://civitai.red/images/... 或 C:/path/to/image.png",
                "fetchImage": "获取图片",
-                "uploadSectionDescription": "上传带有 LoRA 元数据的图片以导入为配方。",
-                "selectImage": "选择图片",
                "recipeName": "配方名称",
                "recipeNamePlaceholder": "输入配方名称",
                "tagsOptional": "标签（可选）",
@@ -912,6 +910,8 @@
                "errors": {
                    "selectImageFile": "请选择一个图像文件",
                    "enterUrlOrPath": "请输入 URL 或文件路径",
+                    "invalidUrl": "请输入有效的 URL",
+                    "invalidInputFormat": "请输入图片 URL 或本地图片文件路径",
                    "selectLoraRoot": "请选择 LoRA 根目录"
                }
            },
@@ -860,14 +860,12 @@
            "import": {
                "action": "匯入",
                "title": "從圖片或網址匯入配方",
-                "urlLocalPath": "網址 / 本機路徑",
-                "uploadImage": "上傳圖片",
-                "urlSectionDescription": "輸入 Civitai 圖片網址或本機檔案路徑以匯入配方。",
+                "dropZoneLabel": "上傳圖片",
+                "dropZoneHint": "將圖片拖曳至此處、從剪貼簿貼上，或點擊瀏覽",
+                "orDivider": "或拖曳 / 貼上圖片",
                "imageUrlOrPath": "圖片網址或檔案路徑：",
                "urlPlaceholder": "https://civitai.com/images/... 或 C:/path/to/image.png",
                "fetchImage": "取得圖片",
-                "uploadSectionDescription": "上傳含 LoRA metadata 的圖片以匯入配方。",
-                "selectImage": "選擇圖片",
                "recipeName": "配方名稱",
                "recipeNamePlaceholder": "輸入配方名稱",
                "tagsOptional": "標籤（選填）",
@@ -912,6 +910,8 @@
                "errors": {
                    "selectImageFile": "請選擇圖片檔案",
                    "enterUrlOrPath": "請輸入網址或檔案路徑",
+                    "invalidUrl": "請輸入有效的 URL",
+                    "invalidInputFormat": "請輸入圖片 URL 或本機圖片檔案路徑",
                    "selectLoraRoot": "請選擇 LoRA 根目錄"
                }
            },
@@ -77,41 +77,84 @@
    margin-bottom: var(--space-3);
 }

-/* File Input Styles */
-.file-input-wrapper {
-    position: relative;
-    margin-bottom: var(--space-1);
+.import-description {
+    margin-top: 0;
 }

-.file-input-wrapper input[type="file"] {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    cursor: pointer;
-    z-index: 2;
-}
-
-.file-input-button {
+/* Unified Drop Zone */
+.import-drop-zone {
    display: flex;
+    flex-direction: column;
    align-items: center;
    justify-content: center;
-    gap: 8px;
-    padding: 10px 16px;
-    background: var(--lora-accent);
-    color: var(--lora-text);
-    border-radius: var(--border-radius-xs);
-    font-weight: 500;
+    gap: var(--space-1);
+    padding: var(--space-4) var(--space-3);
+    border: 2px dashed var(--border-color);
+    border-radius: var(--border-radius-sm);
+    background: var(--bg-color);
+    color: var(--text-color);
+    text-align: center;
    cursor: pointer;
-    transition: background-color 0.2s;
+    transition: border-color 0.2s, background-color 0.2s;
 }

-.file-input-button:hover {
-    background: oklch(from var(--lora-accent) l c h / 0.9);
+.import-drop-zone:hover,
+.import-drop-zone:focus-visible {
+    border-color: var(--lora-accent);
+    outline: none;
 }

-.file-input-wrapper:hover .file-input-button {
-    background: oklch(from var(--lora-accent) l c h / 0.9);
+.import-drop-zone.drag-over {
+    border-color: var(--lora-accent);
+    background: oklch(var(--lora-accent) / 0.08);
+}
+
+.drop-zone-icon {
+    font-size: 1.8em;
+    color: var(--lora-accent);
+}
+
+.drop-zone-primary {
+    margin: 0;
+    opacity: 0.8;
+}
+
+.drop-zone-filename {
+    margin: 0;
+    font-weight: 500;
+    word-break: break-all;
+}
+
+/* Divider between drop zone and URL input */
+.import-divider {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    margin: var(--space-3) 0;
+    color: var(--text-color);
+    opacity: 0.6;
+    font-size: 0.9em;
+}
+
+.import-divider::before,
+.import-divider::after {
+    content: '';
+    flex: 1;
+    border-top: 1px solid var(--border-color);
+}
+
+/* Loading state for the fetch button */
+#fetchImageBtn.loading {
+    opacity: 0.8;
+    cursor: wait;
+}
+
+/* Inputs sit flush against the scrollable step's content edge; an outset
+   outline (global offset: 2px) gets clipped by overflow-x. Draw the focus
+   outline inset instead so the full ring stays visible. */
+#importModal input:focus-visible,
+#importModal select:focus-visible {
+    outline-offset: -2px;
 }

 /* Recipe Details Layout */
@@ -25,7 +25,7 @@ export class ImportManager {
        this.selectedFolder = '';
        this.downloadableLoRAs = [];
        this.recipeId = null;
-        this.importMode = 'url'; // Default mode: 'url' or 'upload'
+        this.importMode = null; // Set by input handlers: 'url' or 'upload'
        this.useDefaultPath = false;
        this.apiClient = null;

@@ -70,10 +70,8 @@ export class ImportManager {
            this.stepManager.removeInjectedStyles();
        });

-        // Verify visibility and focus on URL input
+        // Verify visibility and focus on the URL input (primary mode)
        setTimeout(() => {
-            // Ensure URL option is selected and focus on the input
-            this.toggleImportMode('url');
            const urlInput = document.getElementById('imageUrlInput');
            if (urlInput) {
                urlInput.focus();
@@ -87,6 +85,62 @@ export class ImportManager {
        if (useDefaultPathToggle) {
            useDefaultPathToggle.addEventListener('change', this.handleToggleDefaultPath);
        }
+
+        const modal = document.getElementById('importModal');
+        const dropZone = document.getElementById('importDropZone');
+        const fileInput = document.getElementById('recipeImageUpload');
+        const urlInput = document.getElementById('imageUrlInput');
+
+        // Submit URL with Enter
+        if (urlInput) {
+            urlInput.addEventListener('keydown', (event) => {
+                if (event.key === 'Enter') {
+                    event.preventDefault();
+                    this.handleUrlInput();
+                }
+            });
+        }
+
+        if (dropZone && fileInput) {
+            // Click or keyboard activation opens the file picker
+            dropZone.addEventListener('click', () => fileInput.click());
+            dropZone.addEventListener('keydown', (event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    fileInput.click();
+                }
+            });
+
+            // Drag & drop
+            dropZone.addEventListener('dragover', (event) => {
+                event.preventDefault();
+                dropZone.classList.add('drag-over');
+            });
+            dropZone.addEventListener('dragleave', () => {
+                dropZone.classList.remove('drag-over');
+            });
+            dropZone.addEventListener('drop', (event) => {
+                event.preventDefault();
+                dropZone.classList.remove('drag-over');
+                const file = event.dataTransfer?.files?.[0];
+                if (file) {
+                    this.imageProcessor.handleDroppedFile(file);
+                }
+            });
+        }
+
+        // Paste an image from clipboard while the modal is open
+        if (modal) {
+            modal.addEventListener('paste', (event) => {
+                if (this.stepManager.currentStep !== 'uploadStep') return;
+                const file = Array.from(event.clipboardData?.files || [])
+                    .find(f => f.type.startsWith('image/'));
+                if (file) {
+                    event.preventDefault();
+                    this.imageProcessor.handleDroppedFile(file);
+                }
+            });
+        }
    }

    resetSteps() {
@@ -128,9 +182,11 @@ export class ImportManager {
        this.downloadableLoRAs = [];
        this.selectedFolder = '';

-        // Reset import mode
-        this.importMode = 'url';
-        this.toggleImportMode('url');
+        // Import mode is set by the input handlers ('url' or 'upload')
+        this.importMode = null;
+
+        // Reset drop zone filename feedback
+        this.updateSelectedFileName(null);

        // Clear folder tree selection
        if (this.folderTreeManager) {
@@ -166,43 +222,24 @@ export class ImportManager {
        }
    }

-    toggleImportMode(mode) {
-        this.importMode = mode;
+    /**
+     * Show the selected file name in the drop zone, or restore the default
+     * hint text when called with null.
+     */
+    updateSelectedFileName(fileName) {
+        const nameEl = document.getElementById('selectedFileName');
+        const hintEl = document.getElementById('dropZonePrimaryText');
+        if (!nameEl || !hintEl) return;

-        // Update toggle buttons
-        const uploadBtn = document.querySelector('.toggle-btn[data-mode="upload"]');
-        const urlBtn = document.querySelector('.toggle-btn[data-mode="url"]');
-
-        if (uploadBtn && urlBtn) {
-            if (mode === 'upload') {
-                uploadBtn.classList.add('active');
-                urlBtn.classList.remove('active');
-            } else {
-                uploadBtn.classList.remove('active');
-                urlBtn.classList.add('active');
-            }
+        if (fileName) {
+            nameEl.textContent = fileName;
+            nameEl.style.display = 'block';
+            hintEl.style.display = 'none';
+        } else {
+            nameEl.textContent = '';
+            nameEl.style.display = 'none';
+            hintEl.style.display = '';
        }
-
-        // Show/hide appropriate sections
-        const uploadSection = document.getElementById('uploadSection');
-        const urlSection = document.getElementById('urlSection');
-
-        if (uploadSection && urlSection) {
-            if (mode === 'upload') {
-                uploadSection.style.display = 'block';
-                urlSection.style.display = 'none';
-            } else {
-                uploadSection.style.display = 'none';
-                urlSection.style.display = 'block';
-            }
-        }
-
-        // Clear error messages
-        const uploadError = document.getElementById('uploadError');
-        const importUrlError = document.getElementById('importUrlError');
-
-        if (uploadError) uploadError.textContent = '';
-        if (importUrlError) importUrlError.textContent = '';
    }

    handleImageUpload(event) {
@@ -345,6 +382,9 @@ export class ImportManager {
        const urlInput = document.getElementById('imageUrlInput');
        if (urlInput) urlInput.value = '';

+        // Reset drop zone filename feedback
+        this.updateSelectedFileName(null);
+
        // Clear error messages
        const uploadError = document.getElementById('uploadError');
        if (uploadError) uploadError.textContent = '';
@@ -8,9 +8,17 @@ export class ImageProcessor {

    handleFileUpload(event) {
        const file = event.target.files[0];
-        const errorElement = document.getElementById('uploadError');
+        if (file) {
+            this.handleDroppedFile(file);
+        }
+    }

-        if (!file) return;
+    /**
+     * Shared entry for files coming from the file picker, drag & drop,
+     * or clipboard paste.
+     */
+    handleDroppedFile(file) {
+        const errorElement = document.getElementById('uploadError');

        // Validate file type
        if (!file.type.match('image.*')) {
@@ -21,6 +29,10 @@ export class ImageProcessor {
        // Reset error
        errorElement.textContent = '';
        this.importManager.recipeImage = file;
+        this.importManager.importMode = 'upload';
+
+        // Show the selected file name in the drop zone
+        this.importManager.updateSelectedFileName(file.name);

        // Auto-proceed to next step if file is selected
        this.importManager.uploadAndAnalyzeImage();
@@ -37,8 +49,26 @@ export class ImageProcessor {
            return;
        }

+        // Front-end format validation before hitting the backend
+        if (input.startsWith('http://') || input.startsWith('https://')) {
+            try {
+                new URL(input);
+            } catch {
+                errorElement.textContent = translate('recipes.controls.import.errors.invalidUrl', {}, 'Please enter a valid URL');
+                return;
+            }
+        } else if (!/\.(png|jpe?g|webp|gif|bmp|avif|jxl|mp4|webm)$/i.test(input)) {
+            errorElement.textContent = translate('recipes.controls.import.errors.invalidInputFormat', {}, 'Please enter an image URL or a local image file path');
+            return;
+        }
+
        // Reset error
        errorElement.textContent = '';
+        this.importManager.importMode = 'url';
+
+        // Put the fetch button into a loading state to prevent duplicate submits
+        const fetchBtn = document.getElementById('fetchImageBtn');
+        this._setFetchButtonLoading(fetchBtn, true);

        // Show loading indicator
        this.importManager.loadingManager.showSimpleLoading(translate('recipes.controls.import.processingInput', {}, 'Processing input...'));
@@ -55,10 +85,21 @@ export class ImageProcessor {
        } catch (error) {
            errorElement.textContent = error.message || 'Failed to process input';
        } finally {
+            this._setFetchButtonLoading(fetchBtn, false);
            this.importManager.loadingManager.hide();
        }
    }

+    _setFetchButtonLoading(button, isLoading) {
+        if (!button) return;
+        button.disabled = isLoading;
+        button.classList.toggle('loading', isLoading);
+        const icon = button.querySelector('i');
+        if (icon) {
+            icon.className = isLoading ? 'fas fa-spinner fa-spin' : 'fas fa-download';
+        }
+    }
+
    async analyzeImageFromUrl(url) {
        try {
            // Call the API with URL data
@@ -1,6 +1,7 @@
 export class ImportStepManager {
    constructor() {
        this.injectedStyles = null;
+        this.currentStep = null;
    }

    removeInjectedStyles() {
@@ -18,6 +19,7 @@ export class ImportStepManager {
    showStep(stepId) {
        // Remove any injected styles to prevent conflicts
        this.removeInjectedStyles();
+        this.currentStep = stepId;
        
        // Hide all steps first
        document.querySelectorAll('.import-step').forEach(step => {
@@ -5,25 +5,17 @@
            <h2>{{ t('recipes.controls.import.action') }}</h2>
        </div>
        
-        <!-- Step 1: Upload Image or Input URL -->
+        <!-- Step 1: Provide Image (URL first, or drop zone below) -->
        <div class="import-step" id="uploadStep">
-            <div class="import-mode-toggle">
-                <button class="toggle-btn active" data-mode="url" onclick="importManager.toggleImportMode('url')">
-                    <i class="fas fa-link"></i> {{ t('recipes.controls.import.urlLocalPath') }}
-                </button>
-                <button class="toggle-btn" data-mode="upload" onclick="importManager.toggleImportMode('upload')">
-                    <i class="fas fa-upload"></i> {{ t('recipes.controls.import.uploadImage') }}
-                </button>
-            </div>
+            <p class="import-description">{{ t('recipes.controls.import.title') }}</p>

-            <!-- Input URL/Path Section -->
+            <!-- Input URL/Path Section (primary mode) -->
            <div class="import-section" id="urlSection">
-                <p>{{ t('recipes.controls.import.urlSectionDescription') }}</p>
                <div class="input-group">
                    <label for="imageUrlInput">{{ t('recipes.controls.import.imageUrlOrPath') }}</label>
                    <div class="input-with-button">
                        <input type="text" id="imageUrlInput" placeholder="{{ t('recipes.controls.import.urlPlaceholder') }}">
-                        <button class="primary-btn" onclick="importManager.handleUrlInput()">
+                        <button class="primary-btn" id="fetchImageBtn" onclick="importManager.handleUrlInput()">
                            <i class="fas fa-download"></i> {{ t('recipes.controls.import.fetchImage') }}
                        </button>
                    </div>
@@ -31,20 +23,18 @@
                </div>
            </div>

-            <!-- Upload Image Section -->
-            <div class="import-section" id="uploadSection">
-                <p>{{ t('recipes.controls.import.uploadSectionDescription') }}</p>
-                <div class="input-group">
-                    <label for="recipeImageUpload">{{ t('recipes.controls.import.selectImage') }}</label>
-                    <div class="file-input-wrapper">
-                        <input type="file" id="recipeImageUpload" accept="image/*" onchange="importManager.handleImageUpload(event)">
-                        <div class="file-input-button">
-                            <i class="fas fa-upload"></i> {{ t('recipes.controls.import.selectImage') }}
-                        </div>
-                    </div>
-                    <div class="error-message" id="uploadError"></div>
-                </div>
+            <div class="import-divider"><span>{{ t('recipes.controls.import.orDivider') }}</span></div>
+
+            <!-- Unified drop zone: click to browse, drag & drop, or paste an image -->
+            <div class="import-drop-zone" id="importDropZone" tabindex="0" role="button"
+                 aria-label="{{ t('recipes.controls.import.dropZoneLabel') }}">
+                <input type="file" id="recipeImageUpload" accept="image/*" hidden
+                       onchange="importManager.handleImageUpload(event)">
+                <i class="fas fa-cloud-upload-alt drop-zone-icon"></i>
+                <p class="drop-zone-primary" id="dropZonePrimaryText">{{ t('recipes.controls.import.dropZoneHint') }}</p>
+                <p class="drop-zone-filename" id="selectedFileName" style="display: none;"></p>
            </div>
+            <div class="error-message" id="uploadError"></div>

            <div class="modal-actions">
                <button class="secondary-btn" onclick="modalManager.closeModal('importModal')">{{ t('common.actions.cancel') }}</button>