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

135
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');
@ -714,60 +699,72 @@ const Search = () => {
{/* Upload Section */} {/* Upload Section */}
<div className='col-md-6'> <div className='col-md-6'>
<div className="row form-group mt-4"> <div className="row form-group mt-4">
<CustomLabel htmlFor="uploadPhoto" style={styles.customLabel}> <CustomLabel htmlFor="uploadPhoto" style={styles.customLabel}>
Upload Face Photo Upload Face Photo
</CustomLabel> </CustomLabel>
<FileUploader <FileUploader
handleChange={handleImageUpload} handleChange={handleImageUpload}
name="file" name="file"
types={fileTypes} types={fileTypes}
multiple={false} multiple={false}
onTypeError={(err) => { onTypeError={(err) => {
setImageError('Only JPG/JPEG files are allowed'); setImageError('Only JPG/JPEG files are allowed');
setFile(null); setFile(null);
setSelectedImageName(''); setSelectedImageName('');
}} }}
onDrop={(files) => { onDrop={(files) => {
if (files && files[0]) { if (files && files[0]) {
handleImageUpload(files[0]); handleImageUpload(files[0]);
} }
}} }}
children={ children={
<div style={isMobile ? styles.uploadAreaMobile : styles.uploadArea}> <div style={isMobile ? styles.uploadAreaMobile : styles.uploadArea}>
<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}
</small> </small>
)} )}
</div> </div>
</div> </div>
{selectedImageName && ( {selectedImageName && (
<div className="mt-3"> <div className="mt-3">
<p><strong>File:</strong> {selectedImageName}</p> <p><strong>File:</strong> {selectedImageName}</p>
{file && ( {file && (
<p style={styles.fileSize}> <p style={styles.fileSize}>
Size: {formatFileSize(file.size)} Size: {formatFileSize(file.size)}
</p> </p>
)} )}
<button className="btn btn-danger" onClick={handleImageCancel}> <button className="btn btn-danger" onClick={handleImageCancel}>
<FontAwesomeIcon icon={faTimes} className="me-2" />Cancel <FontAwesomeIcon icon={faTimes} className="me-2" />Cancel
</button> </button>
</div> </div>
)} )}
{errorMessage && <small style={styles.uploadError}>{errorMessage}</small>} {errorMessage && <small style={styles.uploadError}>{errorMessage}</small>}
{/* Submit Button */} {/* Submit Button */}
<div style={styles.submitButton}> <div style={styles.submitButton}>