Solve - Search

src/screens/Biometric/FaceRecognition/Section/Search.jsx

@@ -135,6 +135,8 @@ const Search = () => {
 
     // Store the uploaded file
     setUploadedFile(file);
+    setFile(file);
+    setSelectedImageName(file.name);
 
     // Check file size (2MB = 2 * 1024 * 1024 bytes)
     const maxSize = 2 * 1024 * 1024;
@@ -146,7 +148,7 @@ const Search = () => {
         return;
     }
 
-    // Check file type using both extension and MIME type
+    // Check file type
     const fileExtension = file.name.split('.').pop().toLowerCase();
     const validExtensions = ['jpg', 'jpeg'];
     const validMimeTypes = ['image/jpeg', 'image/jpg'];
@@ -159,28 +161,11 @@ const Search = () => {
         return;
     }
 
-    // Create preview URL for the uploaded image
+    // Create preview URL
     const previewUrl = URL.createObjectURL(file);
     
     // Check image dimensions
     const img = new Image();
-    img.onload = () => {
-        URL.revokeObjectURL(previewUrl);
-        
-        if (img.width > 300 || img.height > 300) {
-            setImageError('Image dimensions must not exceed 300x300 pixels');
-            setFile(null);
-            setSelectedImageName('');
-            setUploadedFile(null);
-            return;
-        }
-
-        // All validations passed
-        setSelectedImageName(file.name);
-        setFile(file);
-        setImageError('');
-    };
-
     img.onerror = () => {
         URL.revokeObjectURL(previewUrl);
         setImageError('Invalid image file');
@@ -738,13 +723,25 @@ const Search = () => {
                           <i className="fas fa-cloud-upload-alt" style={styles.uploadIcon}></i>
                           <p style={styles.uploadText}>Drag and Drop Here</p>
                           <p>Or</p>
-                        <a href="#" onClick={() => fileInputRef.current.click()}>Browse</a>
-                        <p className="text-muted">Recommended size: 300x300 (Max File Size: 2MB)</p>
+                          <span style={{ color: '#0542cc', cursor: 'pointer' }}>Browse</span>
+                          <p className="text-muted">Recommended size: 320x200 (Max File Size: 2MB)</p>
                           <p className="text-muted">Supported file types: JPG, JPEG</p>
                       </div>
                   }
               />
               
+              <input 
+                  type="file"
+                  ref={fileInputRef}
+                  style={{ display: 'none' }}
+                  accept=".jpg,.jpeg"
+                  onChange={(e) => {
+                      if (e.target.files?.[0]) {
+                          handleImageUpload(e.target.files[0]);
+                      }
+                  }}
+              />
+
               {imageError && (
                   <small className="text-danger mt-2" style={{ fontSize: '12px' }}>
                       {imageError}