Drag and Drop Here
Or
fileInputRef.current.click()} style={styles.browseLink}>Browse -Recommended size: 300x300 (Max File Size: 2MB)
+Recommended size: 320x200 (Max File Size: 2MB)
Supported file types: JPG, JPEG
diff --git a/src/screens/Biometric/OcrNpwp/Verify.jsx b/src/screens/Biometric/OcrNpwp/Verify.jsx index c9aff44..02a4f41 100644 --- a/src/screens/Biometric/OcrNpwp/Verify.jsx +++ b/src/screens/Biometric/OcrNpwp/Verify.jsx @@ -126,8 +126,8 @@ const Verify = () => { img.onload = () => { URL.revokeObjectURL(img.src); - if (img.width > 300 || img.height > 300) { - reject('Image dimensions must not exceed 300x300 pixels'); + if (img.width > 320 || img.height > 200) { + reject('Image dimensions must not exceed 320x200 pixels'); } else { resolve(true); } @@ -142,6 +142,7 @@ const Verify = () => { // Update handleImageUpload function const handleImageUpload = async (file) => { + setErrorMessage(''); setFile(file); setSelectedImageName(file.name); @@ -190,25 +191,48 @@ const Verify = () => { applicationId: '', file: '' }; - + if (!applicationId) { errors.applicationId = 'Please select an Application ID.'; } - + if (!file) { errors.file = 'Please upload an image file.'; } else if (imageError) { errors.file = imageError; } - + setValidationErrors(errors); return Object.values(errors).every(error => error === ''); }; - - // Submit form and trigger OCR API - const handleCheckClick = async () => { + + const handleApiError = (response) => { + if (response.status_code === 400) { + console.error('❌ Bad Request:', { + status: response.status_code, + detail: response.detail || 'Mohon Upload NPWP' + }); + return response.detail || 'Mohon Upload NPWP'; + } + + if (response.status_code >= 500) { + console.error('🔥 Server Error:', { + status: response.status_code, + message: 'Internal Server Error' + }); + return 'Internal Server Error'; + } + + console.error('⚠️ Unknown Error:', { + status: response.status_code, + response + }); + return 'Terjadi kesalahan. Silakan coba lagi.'; + }; + + const handleCheckClick = () => { if (!validateForm()) { - return; // Form is not valid + return; } setIsLoading(true); @@ -216,63 +240,66 @@ const Verify = () => { formData.append('application_id', applicationId); formData.append('file', file); - try { - const response = await fetch(`${BASE_URL}/ocr-npwp`, { - method: 'POST', - headers: { - 'accept': 'application/json', - 'x-api-key': API_KEY, - }, - body: formData, - }); - + fetch(`${BASE_URL}/ocr-npwp`, { + method: 'POST', + headers: { + 'accept': 'application/json', + 'x-api-key': API_KEY, + }, + body: formData, + }) + .then(response => { + if (response.status === 400) { + return response.json().then(errorData => { + throw new Error(errorData.detail); + }); + } if (!response.ok) { - throw new Error('OCR processing failed'); + throw new Error('OCR processing failed, Please check your input'); + } + return response.json(); + }) + .then(result => { + console.log('📡 API Response:', result); + + if (result.status_code !== 201) { + throw new Error(handleApiError(result)); } - const result = await response.json(); + const responseData = result.details.data?.['data-npwp'] || {}; + const updateQuota = result.details.data.quota; - // Log the full result to verify structure - console.log('OCR API Response:', result); + const data = { + npwp: responseData.npwp || 'N/A', + npwpName: responseData.name || 'N/A', + npwpAddress: responseData.address || 'N/A', + npwpX: responseData.npwp_x || 'N/A', + imageUrl: result.details.data?.image_url || '', + }; - if (result.status_code === 201) { - const responseData = result.details.data?.['data-npwp'] || {}; - const updateQuota = result.details.data.quota - - const data = { - npwp: responseData.npwp || 'N/A', - npwpName: responseData.name || 'N/A', - npwpAddress: responseData.address || 'N/A', - npwpX: responseData.npwp_x || 'N/A', - imageUrl: result.details.data?.image_url || '', // Properly access image_url - }; - - setSelectedQuota(updateQuota) + setSelectedQuota(updateQuota); + setData(data); + setShowResult(true); + setErrorMessage(''); + setSelectedImageName(''); + setResultImageLabel(selectedImageName); - console.log('Image URL from OCR:', result.details.data?.image_url); // Log the image URL correctly - - setData(data); - setShowResult(true); - setErrorMessage(''); - setSelectedImageName(''); - setResultImageLabel(selectedImageName); - - // Fetch image if image URL exists in the result - if (result.details.data?.image_url) { - const imageFileName = result.details.data.image_url.split('/').pop(); // Get the image filename - console.log('Image file name:', imageFileName); // Debug the file name - await fetchImage(imageFileName); // Call the fetchImage function to fetch the image - } - } else { - setErrorMessage('OCR processing failed'); + if (result.details.data?.image_url) { + const imageFileName = result.details.data.image_url.split('/').pop(); + return fetchImage(imageFileName); } - } catch (error) { - setErrorMessage(error.message || 'Error during OCR processing'); - } finally { + }) + .catch(error => { + console.error('🔥 Request Failed:', error); + setErrorMessage(error.message); + setShowResult(false); + }) + .finally(() => { setIsLoading(false); - } + }); }; + // The fetchImage function you already have in your code const fetchImage = async (imageFileName) => { setIsLoading(true); @@ -425,16 +452,6 @@ const Verify = () => { }, }; - const formatFileSize = (sizeInBytes) => { - if (sizeInBytes < 1024) { - return `${sizeInBytes} bytes`; // Jika ukuran lebih kecil dari 1 KB - } else if (sizeInBytes < 1048576) { - return `${(sizeInBytes / 1024).toFixed(2)} KB`; // Jika ukuran lebih kecil dari 1 MB - } else { - return `${(sizeInBytes / 1048576).toFixed(2)} MB`; // Jika ukuran lebih besar dari 1 MB - } - }; - if (!isServer) { return (Drag and Drop Here
Or
fileInputRef.current.click()} style={styles.browseLink}>Browse -Recommended size: 300x300 (Max File Size: 2MB)
+Recommended size: 320x200 (Max File Size: 2MB)
Supported file types: JPG, JPEG, PNG
File: {selectedImageName}
- {file && ( -- Size: {formatFileSize(file.size)} -
- )} diff --git a/src/screens/Biometric/OcrSim/Verify.jsx b/src/screens/Biometric/OcrSim/Verify.jsx index d33669a..40d5aeb 100644 --- a/src/screens/Biometric/OcrSim/Verify.jsx +++ b/src/screens/Biometric/OcrSim/Verify.jsx @@ -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 > 320 || img.height > 200) { + reject('Image dimensions must not exceed 320x200 pixels'); + } else { + resolve(true); + } + }; + + img.onerror = () => { + URL.revokeObjectURL(img.src); + reject('Failed to load image'); + }; + }); + }; + + const handleImageUpload = async (file) => { + setErrorMessage(''); 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); @@ -146,25 +190,48 @@ const Verify = () => { applicationId: '', file: '' }; - + if (!applicationId) { errors.applicationId = 'Please select an Application ID.'; } - + if (!file) { errors.file = 'Please upload an image file.'; } else if (imageError) { errors.file = imageError; } - + setValidationErrors(errors); return Object.values(errors).every(error => error === ''); }; - - // Submit form and trigger OCR API - const handleCheckClick = async () => { + + const handleApiError = (response) => { + if (response.status_code === 400) { + console.error('❌ Bad Request:', { + status: response.status_code, + detail: response.detail || 'Mohon Upload SIM' + }); + return response.detail || 'Mohon Upload SIM'; + } + + if (response.status_code >= 500) { + console.error('🔥 Server Error:', { + status: response.status_code, + message: 'Internal Server Error' + }); + return 'Internal Server Error'; + } + + console.error('⚠️ Unknown Error:', { + status: response.status_code, + response + }); + return 'Terjadi kesalahan. Silakan coba lagi.'; + }; + + const handleCheckClick = () => { if (!validateForm()) { - return; // Form is not valid + return; } setIsLoading(true); @@ -172,71 +239,74 @@ const Verify = () => { formData.append('application_id', applicationId); formData.append('file', file); - try { - const response = await fetch(`${BASE_URL}/ocr-sim`, { - method: 'POST', - headers: { - 'accept': 'application/json', - 'x-api-key': API_KEY, - }, - body: formData, - }); - + fetch(`${BASE_URL}/ocr-sim`, { + method: 'POST', + headers: { + 'accept': 'application/json', + 'x-api-key': API_KEY, + }, + body: formData, + }) + .then(response => { + if (response.status === 400) { + return response.json().then(errorData => { + throw new Error(errorData.detail); + }); + } if (!response.ok) { - throw new Error('OCR processing failed'); + throw new Error('OCR processing failed, Please check your input'); + } + return response.json(); + }) + .then(result => { + console.log('📡 API Response:', result); + + if (result.status_code !== 201) { + throw new Error(handleApiError(result)); } - const result = await response.json(); + const responseData = result.details.data?.['data-sim'] || {}; + const updateQuota = result.details.data.quota; - // Log the full result to verify structure - console.log('OCR API Response:', result); + const data = { + sim: responseData.sim || 'N/A', + simName: responseData.name || 'N/A', + simAddress: responseData.address || 'N/A', + simType: responseData.type || 'N/A', + simValidUntil: responseData.valid_until || 'N/A', + simDomain: responseData.domain || 'N/A', + simBirthPlace: responseData.birthplace || 'N/A', + simDob: responseData.dob || 'N/A', + simGender: responseData.gender || 'N/A', + simHeight: responseData.height || 'N/A', + simBlood: responseData.blood || 'N/A', + simOccupation: responseData.occupation || 'N/A', + imageUrl: result.details.data?.image_url || '', + }; - if (result.status_code === 201) { - const responseData = result.details.data?.['data-sim'] || {}; - const updateQuota = result.details.data.quota - - const data = { - sim: responseData.sim || 'N/A', - simName: responseData.name || 'N/A', - simAddress: responseData.address || 'N/A', - simType: responseData.type || 'N/A', - simValidUntil: responseData.valid_until || 'N/A', - simDomain: responseData.domain || 'N/A', - simBirthPlace: responseData.birthplace || 'N/A', - simDob: responseData.dob || 'N/A', - simGender: responseData.gender || 'N/A', - simHeight: responseData.height || 'N/A', - simBlood: responseData.blood || 'N/A', - simOccupation: responseData.occupation || 'N/A', - imageUrl: result.details.data?.image_url || '', // Properly access image_url - }; - - setSelectedQuota(updateQuota) + setSelectedQuota(updateQuota); + setData(data); + setShowResult(true); + setErrorMessage(''); + setSelectedImageName(''); + setResultImageLabel(selectedImageName); - console.log('Image URL from OCR:', result.details.data?.image_url); // Log the image URL correctly - - setData(data); - setShowResult(true); - setErrorMessage(''); - setSelectedImageName(''); - setResultImageLabel(selectedImageName); - - // Fetch image if image URL exists in the result - if (result.details.data?.image_url) { - const imageFileName = result.details.data.image_url.split('/').pop(); // Get the image filename - console.log('Image file name:', imageFileName); // Debug the file name - await fetchImage(imageFileName); // Call the fetchImage function to fetch the image - } - } else { - setErrorMessage('OCR processing failed'); + if (result.details.data?.image_url) { + const imageFileName = result.details.data.image_url.split('/').pop(); + return fetchImage(imageFileName); } - } catch (error) { - setErrorMessage(error.message || 'Error during OCR processing'); - } finally { + }) + .catch(error => { + console.error('🔥 Request Failed:', error); + setErrorMessage(error.message); + setShowResult(false); + }) + .finally(() => { setIsLoading(false); - } + }); }; + // The fetchImage function you already have in your code const fetchImage = async (imageFileName) => { setIsLoading(true); @@ -388,16 +458,6 @@ const Verify = () => { }, }; - const formatFileSize = (sizeInBytes) => { - if (sizeInBytes < 1024) { - return `${sizeInBytes} bytes`; // Jika ukuran lebih kecil dari 1 KB - } else if (sizeInBytes < 1048576) { - return `${(sizeInBytes / 1024).toFixed(2)} KB`; // Jika ukuran lebih kecil dari 1 MB - } else { - return `${(sizeInBytes / 1048576).toFixed(2)} MB`; // Jika ukuran lebih besar dari 1 MB - } - }; - if (!isServer) { return (Drag and Drop Here
Or
fileInputRef.current.click()} style={styles.browseLink}>Browse -Recommended size: 300x300 (Max File Size: 2MB)
+Recommended size: 320x200 (Max File Size: 2MB)
Supported file types: JPG, JPEG, PNG
File: {selectedImageName}
- {file && ( -- Size: {formatFileSize(file.size)} -
- )}{validationErrors.file}
} + {imageError &&{imageError}
}