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

Solve - Search

Browse Source
This commit is contained in:
Rizqika 2024-12-09 11:17:53 +07:00
parent 1717aedcb1
commit 12b0519995
1 changed files with 66 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/screens/Biometric/FaceRecognition/Section/Search.jsx
View File

@ -135,6 +135,8 @@ const Search = () => {
// Store the uploaded file // Store the uploaded file
setUploadedFile(file); setUploadedFile(file);
setFile(file);
setSelectedImageName(file.name);
// Check file size (2MB = 2 * 1024 * 1024 bytes) // Check file size (2MB = 2 * 1024 * 1024 bytes)
const maxSize = 2 * 1024 * 1024; const maxSize = 2 * 1024 * 1024;
@ -146,7 +148,7 @@ const Search = () => {
return; return;
} }
// Check file type using both extension and MIME type // Check file type
const fileExtension = file.name.split('.').pop().toLowerCase(); const fileExtension = file.name.split('.').pop().toLowerCase();
const validExtensions = ['jpg', 'jpeg']; const validExtensions = ['jpg', 'jpeg'];
const validMimeTypes = ['image/jpeg', 'image/jpg']; const validMimeTypes = ['image/jpeg', 'image/jpg'];
@ -159,28 +161,11 @@ const Search = () => {
return; return;
} }
// Create preview URL for the uploaded image // Create preview URL
const previewUrl = URL.createObjectURL(file); const previewUrl = URL.createObjectURL(file);
// Check image dimensions // Check image dimensions
const img = new Image(); const img = new Image();
img.onload = () => {
URL.revokeObjectURL(previewUrl);
if (img.width > 300 || img.height > 300) {
setImageError('Image dimensions must not exceed 300x300 pixels');
setFile(null);
setSelectedImageName('');
setUploadedFile(null);
return;
}
// All validations passed
setSelectedImageName(file.name);
setFile(file);
setImageError('');
};
img.onerror = () => { img.onerror = () => {
URL.revokeObjectURL(previewUrl); URL.revokeObjectURL(previewUrl);
setImageError('Invalid image file'); setImageError('Invalid image file');
@ -738,13 +723,25 @@ const Search = () => {
<i className="fas fa-cloud-upload-alt" style={styles.uploadIcon}></i> <i className="fas fa-cloud-upload-alt" style={styles.uploadIcon}></i>
<p style={styles.uploadText}>Drag and Drop Here</p> <p style={styles.uploadText}>Drag and Drop Here</p>
<p>Or</p> <p>Or</p>
<a href="#" onClick={() => fileInputRef.current.click()}>Browse</a> <span style={{ color: '#0542cc', cursor: 'pointer' }}>Browse</span>
<p className="text-muted">Recommended size: 300x300 (Max File Size: 2MB)</p> <p className="text-muted">Recommended size: 320x200 (Max File Size: 2MB)</p>
<p className="text-muted">Supported file types: JPG, JPEG</p> <p className="text-muted">Supported file types: JPG, JPEG</p>
</div> </div>
} }
/> />
<input
type="file"
ref={fileInputRef}
style={{ display: 'none' }}
accept=".jpg,.jpeg"
onChange={(e) => {
if (e.target.files?.[0]) {
handleImageUpload(e.target.files[0]);
}
}}
/>
{imageError && ( {imageError && (
<small className="text-danger mt-2" style={{ fontSize: '12px' }}> <small className="text-danger mt-2" style={{ fontSize: '12px' }}>
{imageError} {imageError}