Enhance UrlInputForm component to support file uploads; validate blob URLs and improve URL validation messages.

Author: osamajandali

src/components/UrlInputForm.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
-import { LinkIcon, ArrowRightIcon, AlertCircleIcon } from "lucide-react";
+import { LinkIcon, ArrowRightIcon, AlertCircleIcon, UploadIcon } from "lucide-react";
 
 interface UrlInputFormProps {
   onSubmit: (url: string) => void;
@@ -15,15 +15,26 @@ const UrlInputForm = ({ onSubmit }: UrlInputFormProps) => {
   // Validate if string is a valid URL
   const isValidUrl = (urlString: string): boolean => {
     try {
-      new URL(urlString);
-      return true;
+      // Handle blob URLs (from file input)
+      if (urlString.startsWith('blob:')) {
+        return true;
+      }
+      
+      const url = new URL(urlString);
+      // Allow http, https, and file protocols
+      return url.protocol === 'http:' || url.protocol === 'https:' || url.protocol === 'file:';
     } catch (err) {
       return false;
     }
   };
 
   // Validate if URL points to a YAML file
   const isYamlFile = (urlString: string): boolean => {
+    // For blob URLs, we trust the file input's accept attribute
+    if (urlString.startsWith('blob:')) {
+      return true;
+    }
+    
     const lowerUrl = urlString.toLowerCase();
     return lowerUrl.endsWith('.yml') || lowerUrl.endsWith('.yaml');
   };
@@ -34,7 +45,7 @@ const UrlInputForm = ({ onSubmit }: UrlInputFormProps) => {
     }
 
     if (!isValidUrl(urlString)) {
-      return "Please enter a valid URL";
+      return "Please enter a valid URL (http, https, or file://)";
     }
 
     if (!isYamlFile(urlString)) {
@@ -44,6 +55,19 @@ const UrlInputForm = ({ onSubmit }: UrlInputFormProps) => {
     return null;
   };
 
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      // Revoke previous blob URL if it exists
+      if (url.startsWith('blob:')) {
+        URL.revokeObjectURL(url);
+      }
+      const fileUrl = URL.createObjectURL(file);
+      setUrl(fileUrl);
+      setError(null);
+    }
+  };
+
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
@@ -59,6 +83,12 @@ const UrlInputForm = ({ onSubmit }: UrlInputFormProps) => {
 
   const handleUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newUrl = e.target.value;
+    
+    // Revoke previous blob URL if it exists and user is changing to a different URL
+    if (url.startsWith('blob:') && newUrl !== url) {
+      URL.revokeObjectURL(url);
+    }
+    
     setUrl(newUrl);
 
     // Clear error when user starts typing again
@@ -76,7 +106,8 @@ const UrlInputForm = ({ onSubmit }: UrlInputFormProps) => {
     <div className="w-full">
       <form onSubmit={handleSubmit} className="space-y-4">
         <div className="space-y-2">
-          <div className="relative flex items-center">
+          <div className=" flex items-center">
+            <div className="relative flex-1">
             <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
               <LinkIcon className="h-5 w-5 text-muted-foreground" />
             </div>
@@ -85,11 +116,21 @@ const UrlInputForm = ({ onSubmit }: UrlInputFormProps) => {
               value={url}
               onChange={handleUrlChange}
               placeholder="Enter YAML file URL"
-              className={`pl-10 pr-4 py-6 text-base rounded-l-md rounded-r-none border-r-0 ${
+              className={`pl-10 pr-4 py-6 text-base rounded-l-md rounded-r-none border-r-0 bg-white ${
                 error ? 'border-red-500 focus-visible:ring-red-500' : ''
               }`}
               required
             />
+              <label className="h-full aspect-square flex items-center justify-center cursor-pointer bg-white absolute right-0 top-0 border border-input border-l-0 border-r-0">
+                <input
+                  type="file"
+                  accept=".yml,.yaml"
+                  onChange={handleFileChange}
+                  className="hidden"
+                />
+                <UploadIcon className="h-4 w-4 text-muted-foreground" />
+              </label>
+              </div>
             <Button
               type="submit"
               className="py-6 px-6 rounded-l-none text-base font-medium flex items-center justify-center gap-2 transition-all h-[50px]"