Bläddra i källkod

Fix image preview from URL functionality in ImageInput component

- Fixed preview URL handling to wait for validation completion before showing preview
- Added proper error handling in URL validation
- Ensured base64 data from server response is used for preview when available
- Fixes issue where image preview from URL was not displaying properly on img2img page
Fszontagh 3 månader sedan
förälder
incheckning
c410471789
1 ändrade filer med 27 tillägg och 15 borttagningar
  1. 27 15
      webui/components/ui/image-input.tsx

+ 27 - 15
webui/components/ui/image-input.tsx

@@ -95,13 +95,13 @@ export function ImageInput({
       handleFileValidation(value);
     } else {
       // URL mode - value is a string (not File, not null)
-      // Keep the existing preview URL while validation is in progress
+      // Don't set preview URL yet, wait for validation to complete
       setState(prev => ({
         ...prev,
         mode: 'url',
         validation: null,
         error: null,
-        previewUrl: typeof value === 'string' ? value : null
+        previewUrl: null
       }));
       // value should be a string here, but cast it to be safe
       setUrlInput(value || '');
@@ -170,20 +170,32 @@ export function ImageInput({
 
     setState(prev => ({ ...prev, isValidating: true, error: null }));
     
-    const result = await validateImageUrlWithBase64(url);
-    
-    // Use base64 data for preview if available, otherwise use original URL
-    const previewUrl = result.isValid ? (result.base64Data || url) : null;
-    
-    setState(prev => ({
-      ...prev,
-      isValidating: false,
-      validation: result,
-      error: result.isValid ? null : (result.error || null),
-      previewUrl
-    }));
+    try {
+      const result = await validateImageUrlWithBase64(url);
+      
+      // Use base64 data for preview if available, otherwise use original URL
+      const previewUrl = result.isValid ? (result.base64Data || url) : null;
+      
+      setState(prev => ({
+        ...prev,
+        isValidating: false,
+        validation: result,
+        error: result.isValid ? null : (result.error || null),
+        previewUrl
+      }));
 
-    onValidation?.(result);
+      onValidation?.(result);
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to validate URL';
+      setState(prev => ({
+        ...prev,
+        isValidating: false,
+        validation: { isValid: false, error: errorMessage },
+        error: errorMessage,
+        previewUrl: null
+      }));
+      onValidation?.({ isValid: false, error: errorMessage });
+    }
   };
 
   const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {