rizqikaibnu/rekan_veri_fe_new
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Solve - NPWP

Browse Source
This commit is contained in:
Rizqika 2024-12-09 12:01:34 +07:00
parent a2bbd88df7
commit 5a23d77b23
2 changed files with 41 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/screens/Biometric/OcrNpwp/Verify.jsx
View File

@ -568,7 +568,7 @@ const Verify = () => {
<p>Or</p>
<a href="#" onClick={() => fileInputRef.current.click()} style={styles.browseLink}>Browse</a>
<p className="text-muted" style={styles.uploadText}>Recommended size: 320x200 (Max File Size: 2MB)</p>
<p className="text-muted" style={styles.uploadText}>Supported file types: JPG, JPEG, PNG</p>
<p className="text-muted" style={styles.uploadText}>Supported file types: JPG, JPEG</p>
</div>
{/* File Input */}

68
src/screens/Biometric/OcrSim/Verify.jsx
View File

@ -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);
@ -112,27 +112,18 @@ const Verify = () => {
// Handle file upload
const handleFileDrop = (files) => {
if (files && files[0]) {
if (files?.[0]) {
handleImageUpload(files[0]);
} else {
console.error('No valid files dropped');
setImageError('No valid files dropped');
}
};
};
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');
@ -141,41 +132,54 @@ const Verify = () => {
};
const handleImageUpload = async (file) => {
// Clear previous states
setErrorMessage('');
setFile(file);
setSelectedImageName(file.name);
setImageError('');
// Check if file exists
if (!file) {
setImageError(<span className="text-danger small">Please select a file</span>);
return;
}
try {
// Set file states only after confirming file exists
setFile(file);
setSelectedImageName(file.name);
// 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;
throw new Error('The image format is not suitable. Only JPG and JPEG files are allowed.');
}
// Validate file type
if (!fileTypes.includes(file.type)) {
setImageError('Invalid file type. Only JPG and JPEG are allowed.');
return;
throw new Error('Invalid file type. Only JPG and JPEG are allowed.');
}
// Validate file size
if (file.size > 2 * 1024 * 1024) {
setImageError('File size exceeds 2MB.');
return;
throw new Error('File size exceeds 2MB.');
}
// Validate image dimensions
await checkImageDimensions(file);
setImageError('');
} catch (error) {
setImageError(error);
// Clear states on error
setFile(null);
setSelectedImageName('');
setImageError(<span className="text-danger small">{error.message || error}</span>);
// Reset file input
if (fileInputRef.current) {
fileInputRef.current.value = '';
}
}
};
};
const handleImageCancel = () => {
setFile(null);
@ -573,7 +577,7 @@ const Verify = () => {
<p>Or</p>
<a href="#" onClick={() => fileInputRef.current.click()} style={styles.browseLink}>Browse</a>
<p className="text-muted" style={styles.uploadText}>Recommended size: 320x200 (Max File Size: 2MB)</p>
<p className="text-muted" style={styles.uploadText}>Supported file types: JPG, JPEG, PNG</p>
<p className="text-muted" style={styles.uploadText}>Supported file types: JPG, JPEG</p>
</div>
{/* File Input */}
@ -584,9 +588,17 @@ 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];
if (selectedFile) {
handleImageUpload(selectedFile);
}
// Reset input value
e.target.value = '';
}}
/>
{selectedImageName && (
<div className="mt-3">
<p><strong>File:</strong> {selectedImageName}</p>