Solve - KTP

src/screens/Biometric/OcrKtp/Verify.jsx

@@ -142,42 +142,52 @@ const Verify = () => {
     
     // Update handleImageUpload to include dimension checking
     const handleImageUpload = async (file) => {
+        // Clear previous states
         setErrorMessage('');
+        setImageError('');
+        
+        try {
+            // Validate file existence
+            if (!file) {
+                throw new Error('Please select a file');
+            }
+    
+            // Check file type
+            if (file.type === 'image/png') {
+                throw new Error('The image format is not suitable. Only JPG and JPEG files are allowed.');
+            }
+    
+            if (!fileTypes.includes(file.type)) {
+                throw new Error('Invalid file type. Only JPG and JPEG are allowed.');
+            }
+    
+            // Check file size (2MB = 2 * 1024 * 1024 bytes)
+            const maxSize = 2 * 1024 * 1024;
+            if (file.size > maxSize) {
+                throw new Error('File size exceeds 2MB.');
+            }
+    
+            // If all validations pass, then set the file states
             setFile(file);
             setSelectedImageName(file.name);
             
-        try {
-            // Check if file is PNG
-            if (file.type === 'image/png') {
-                setImageError('The image format is not suitable. Only JPG and JPEG files are allowed.');
-                setFile(null);
-                setSelectedImageName('');
-                return;
-            }
-    
-            // Validate file type
-            if (!fileTypes.includes(file.type)) {
-                setImageError('Invalid file type. Only JPG and JPEG are allowed.');
-                return;
-            }
-    
-            // Validate file size
-            if (file.size > 2 * 1024 * 1024) {
-                setImageError('File size exceeds 2MB.');
-                return;
-            }
-    
             // Validate image dimensions
             await checkImageDimensions(file);
-            setImageError('');
     
         } catch (error) {
-            setImageError(error);
+            // Clear all file-related states when validation fails
             setFile(null);
             setSelectedImageName('');
+            setImageError(error.message);
+            
+            // Reset file input
+            if (fileInputRef.current) {
+                fileInputRef.current.value = '';
+            }
         }
     };
       
+
     const handleImageCancel = () => {
         setFile(null);
         setSelectedImageName('');
@@ -605,9 +615,15 @@ const Verify = () => {
                                 className="form-control"
                                 style={{ display: 'none' }}
                                 accept="image/jpeg, image/jpg"
-                                onChange={(e) => handleImageUpload(e.target.files[0])}
+                                onChange={(e) => {
+                                    const selectedFile = e.target.files[0];
+                                    handleImageUpload(selectedFile);
+                                    // Reset input value to allow selecting the same file again
+                                    e.target.value = '';
+                                }}
                             />
 
+
                             {/* Display selected file info */}
                             {selectedImageName && (
                                 <div className="mt-3">