@@ -795,11 +816,6 @@ const Verify = () => {
{selectedImageName && (
File: {selectedImageName}
- {file && (
-
- Size: {formatFileSize(file.size)}
-
- )}
@@ -817,33 +833,40 @@ const Verify = () => {
{/* Results Section */}
{showResult && (
-
-
Results
-
-
-
-
- | Similarity |
-
- {verified !== null ? (verified ? 'True' : 'False') : 'N/A'}
- |
-
-
-
+
+
Results
+
+
+
+
+ | Similarity |
+
+ {verified !== null ? (verified ? 'True' : 'False') : 'N/A'}
+ |
+
+
+
-
-
-
- File Name: {resultImageLabel} {/* Display the resultImageLabel here */}
-
-
+
+
+
+ File Name: {resultImageLabel}
+
+
+
-
)}
+
);
diff --git a/src/screens/Biometric/OcrKtp/Verify.jsx b/src/screens/Biometric/OcrKtp/Verify.jsx
index 90850eb..43431ef 100644
--- a/src/screens/Biometric/OcrKtp/Verify.jsx
+++ b/src/screens/Biometric/OcrKtp/Verify.jsx
@@ -12,7 +12,7 @@ const CustomLabel = ({ overRide, children, ...props }) => {
const Verify = () => {
const BASE_URL = process.env.REACT_APP_BASE_URL;
const API_KEY = process.env.REACT_APP_API_KEY;
- const fileTypes = ["image/jpeg", "image/png"];
+ const fileTypes = ["image/jpeg", "image/jpg"];
const fileInputRef = useRef(null);
const [isMobile, setIsMobile] = useState(false);
@@ -119,19 +119,63 @@ const Verify = () => {
}
};
- const handleImageUpload = (file) => {
+ const checkImageDimensions = (file) => {
+ return new Promise((resolve, reject) => {
+ const img = new Image();
+ img.src = URL.createObjectURL(file);
+
+ img.onload = () => {
+ URL.revokeObjectURL(img.src);
+ if (img.width > 300 || img.height > 300) {
+ reject('Image dimensions must not exceed 300x300 pixels');
+ } else {
+ resolve(true);
+ }
+ };
+
+ img.onerror = () => {
+ URL.revokeObjectURL(img.src);
+ reject('Failed to load image');
+ };
+ });
+ };
+
+ // Update handleImageUpload to include dimension checking
+ const handleImageUpload = async (file) => {
setFile(file);
setSelectedImageName(file.name);
-
- // Validate file type
- if (!fileTypes.includes(file.type)) {
- setImageError('Invalid file type. Only JPG, JPEG, and PNG are allowed.');
- } else if (file.size > 2 * 1024 * 1024) { // Max 2MB
- setImageError('File size exceeds 2MB.');
- } else {
+
+ 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);
+ setFile(null);
+ setSelectedImageName('');
}
- };
+ };
const handleImageCancel = () => {
setFile(null);
@@ -161,6 +205,33 @@ const Verify = () => {
return Object.values(errors).every(error => error === '');
};
+ const handleApiError = (response) => {
+ // Handle 400 Bad Request
+ if (response.status_code === 400) {
+ console.error('❌ Bad Request:', {
+ status: response.status_code,
+ detail: response.detail || 'Mohon Upload KTP'
+ });
+ return response.detail || 'Mohon Upload KTP';
+ }
+
+ // Handle 500 Internal Server Error
+ if (response.status_code >= 500) {
+ console.error('🔥 Server Error:', {
+ status: response.status_code,
+ message: 'Internal Server Error'
+ });
+ return 'Internal Server Error';
+ }
+
+ // Default error message
+ console.error('⚠️ Unknown Error:', {
+ status: response.status_code,
+ response
+ });
+ return 'Terjadi kesalahan. Silakan coba lagi.';
+ };
+
// Submit form and trigger OCR API
const handleCheckClick = async () => {
if (!validateForm()) {
@@ -183,16 +254,18 @@ const Verify = () => {
});
if (!response.ok) {
- throw new Error('OCR processing failed');
+ throw new Error('OCR processing failed, Please check your input, Please check your input');
}
const result = await response.json();
-
+ console.log('📡 API Response:', result);
+
// Log the full result to verify structure
console.log('OCR API Response:', result);
if (result.status_code === 201) {
const responseData = result.details.data?.['data-ktp'] || {};
+ console.log('✅ OCR Success:', result);
const updateQuota = result.details.data.quota
const data = {
@@ -230,10 +303,22 @@ const Verify = () => {
await fetchImage(imageFileName); // Call the fetchImage function to fetch the image
}
} else {
- setErrorMessage('OCR processing failed');
+ const errorMsg = handleApiError(result);
+ setErrorMessage(errorMsg);
+ setShowResult(false);
+ console.error('❌ OCR Failed:', {
+ error: errorMsg,
+ response: result
+ });
}
} catch (error) {
- setErrorMessage(error.message || 'Error during OCR processing');
+ const errorMsg = 'Internal Server Error';
+ setErrorMessage(errorMsg);
+ setShowResult(false);
+ console.error('🔥 Request Failed:', {
+ error: error.message,
+ detail: error
+ });
} finally {
setIsLoading(false);
}
@@ -350,9 +435,10 @@ const Verify = () => {
borderRadius: '4px',
},
errorText: {
- color: '#721c24',
- fontSize: '14px',
- margin: '0',
+ color: '#dc3545', // Bootstrap danger color
+ fontSize: '12px', // Small text
+ marginTop: '5px',
+ fontWeight: '400'
},
loadingOverlay: {
position: 'fixed', // Gunakan fixed untuk overlay penuh layar
@@ -501,8 +587,9 @@ const Verify = () => {
Upload Image (KTP)
+
- {/* Drag and Drop File Input */}
+ {/* Existing drag & drop area */}
- {/* File Input */}
+ {/* File input */}
handleImageUpload(e.target.files[0])}
/>
+ {/* Display selected file info */}
{selectedImageName && (
File: {selectedImageName}
@@ -543,8 +631,12 @@ const Verify = () => {
)}
+
+ {/* Display validation errors */}
{validationErrors.file &&
{validationErrors.file}
}
+ {imageError &&
{imageError}
}
+