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> <p>Or</p>
<a href="#" onClick={() => fileInputRef.current.click()} style={styles.browseLink}>Browse</a> <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}>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> </div>
{/* File Input */} {/* File Input */}

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

@ -12,7 +12,7 @@ const CustomLabel = ({ overRide, children, ...props }) => {
const Verify = () => { const Verify = () => {
const BASE_URL = process.env.REACT_APP_BASE_URL; const BASE_URL = process.env.REACT_APP_BASE_URL;
const API_KEY = process.env.REACT_APP_API_KEY; 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 fileInputRef = useRef(null);
const [isMobile, setIsMobile] = useState(false); const [isMobile, setIsMobile] = useState(false);
@ -112,27 +112,18 @@ const Verify = () => {
// Handle file upload // Handle file upload
const handleFileDrop = (files) => { const handleFileDrop = (files) => {
if (files && files[0]) { if (files?.[0]) {
handleImageUpload(files[0]); handleImageUpload(files[0]);
} else { } else {
console.error('No valid files dropped'); setImageError('No valid files dropped');
} }
}; };
const checkImageDimensions = (file) => { const checkImageDimensions = (file) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const img = new Image(); const img = new Image();
img.src = URL.createObjectURL(file); 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 = () => { img.onerror = () => {
URL.revokeObjectURL(img.src); URL.revokeObjectURL(img.src);
reject('Failed to load image'); reject('Failed to load image');
@ -141,41 +132,54 @@ const Verify = () => {
}; };
const handleImageUpload = async (file) => { const handleImageUpload = async (file) => {
// Clear previous states
setErrorMessage(''); setErrorMessage('');
setFile(file); setImageError('');
setSelectedImageName(file.name);
// Check if file exists
if (!file) {
setImageError(<span className="text-danger small">Please select a file</span>);
return;
}
try { try {
// Set file states only after confirming file exists
setFile(file);
setSelectedImageName(file.name);
// Check if file is PNG // Check if file is PNG
if (file.type === 'image/png') { if (file.type === 'image/png') {
setImageError('The image format is not suitable. Only JPG and JPEG files are allowed.'); throw new Error('The image format is not suitable. Only JPG and JPEG files are allowed.');
setFile(null);
setSelectedImageName('');
return;
} }
// Validate file type // Validate file type
if (!fileTypes.includes(file.type)) { if (!fileTypes.includes(file.type)) {
setImageError('Invalid file type. Only JPG and JPEG are allowed.'); throw new Error('Invalid file type. Only JPG and JPEG are allowed.');
return;
} }
// Validate file size // Validate file size
if (file.size > 2 * 1024 * 1024) { if (file.size > 2 * 1024 * 1024) {
setImageError('File size exceeds 2MB.'); throw new Error('File size exceeds 2MB.');
return;
} }
// Validate image dimensions // Validate image dimensions
await checkImageDimensions(file); await checkImageDimensions(file);
setImageError(''); setImageError('');
} catch (error) { } catch (error) {
setImageError(error); // Clear states on error
setFile(null); setFile(null);
setSelectedImageName(''); setSelectedImageName('');
setImageError(<span className="text-danger small">{error.message || error}</span>);
// Reset file input
if (fileInputRef.current) {
fileInputRef.current.value = '';
}
} }
}; };
const handleImageCancel = () => { const handleImageCancel = () => {
setFile(null); setFile(null);
@ -573,7 +577,7 @@ const Verify = () => {
<p>Or</p> <p>Or</p>
<a href="#" onClick={() => fileInputRef.current.click()} style={styles.browseLink}>Browse</a> <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}>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> </div>
{/* File Input */} {/* File Input */}
@ -584,9 +588,17 @@ const Verify = () => {
className="form-control" className="form-control"
style={{ display: 'none' }} style={{ display: 'none' }}
accept="image/jpeg, image/jpg" 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 && ( {selectedImageName && (
<div className="mt-3"> <div className="mt-3">
<p><strong>File:</strong> {selectedImageName}</p> <p><strong>File:</strong> {selectedImageName}</p>