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
setUploadedFile(file);
setFile(file);
setSelectedImageName(file.name);
// Check file size (2MB = 2 * 1024 * 1024 bytes)
const maxSize = 2 * 1024 * 1024;
@ -146,7 +148,7 @@ const Search = () => {
return;
}
// Check file type using both extension and MIME type
// Check file type
const fileExtension = file.name.split('.').pop().toLowerCase();
const validExtensions = ['jpg', 'jpeg'];
const validMimeTypes = ['image/jpeg', 'image/jpg'];
@ -159,28 +161,11 @@ const Search = () => {
return;
}
// Create preview URL for the uploaded image
// Create preview URL
const previewUrl = URL.createObjectURL(file);
// Check image dimensions
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 = () => {
URL.revokeObjectURL(previewUrl);
setImageError('Invalid image file');
@ -714,60 +699,72 @@ const Search = () => {
{/* Upload Section */}
<div className='col-md-6'>
<div className="row form-group mt-4">
<CustomLabel htmlFor="uploadPhoto" style={styles.customLabel}>
Upload Face Photo
</CustomLabel>
<FileUploader
handleChange={handleImageUpload}
name="file"
types={fileTypes}
multiple={false}
onTypeError={(err) => {
setImageError('Only JPG/JPEG files are allowed');
setFile(null);
setSelectedImageName('');
}}
onDrop={(files) => {
if (files && files[0]) {
handleImageUpload(files[0]);
}
}}
children={
<div style={isMobile ? styles.uploadAreaMobile : styles.uploadArea}>
<i className="fas fa-cloud-upload-alt" style={styles.uploadIcon}></i>
<p style={styles.uploadText}>Drag and Drop Here</p>
<p>Or</p>
<a href="#" onClick={() => fileInputRef.current.click()}>Browse</a>
<p className="text-muted">Recommended size: 300x300 (Max File Size: 2MB)</p>
<p className="text-muted">Supported file types: JPG, JPEG</p>
</div>
}
/>
<div className="row form-group mt-4">
<CustomLabel htmlFor="uploadPhoto" style={styles.customLabel}>
Upload Face Photo
</CustomLabel>
<FileUploader
handleChange={handleImageUpload}
name="file"
types={fileTypes}
multiple={false}
onTypeError={(err) => {
setImageError('Only JPG/JPEG files are allowed');
setFile(null);
setSelectedImageName('');
}}
onDrop={(files) => {
if (files && files[0]) {
handleImageUpload(files[0]);
}
}}
children={
<div style={isMobile ? styles.uploadAreaMobile : styles.uploadArea}>
<i className="fas fa-cloud-upload-alt" style={styles.uploadIcon}></i>
<p style={styles.uploadText}>Drag and Drop Here</p>
<p>Or</p>
<span style={{ color: '#0542cc', cursor: 'pointer' }}>Browse</span>
<p className="text-muted">Recommended size: 320x200 (Max File Size: 2MB)</p>
<p className="text-muted">Supported file types: JPG, JPEG</p>
</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 && (
<small className="text-danger mt-2" style={{ fontSize: '12px' }}>
{imageError}
</small>
)}
</div>
{imageError && (
<small className="text-danger mt-2" style={{ fontSize: '12px' }}>
{imageError}
</small>
)}
</div>
</div>
{selectedImageName && (
<div className="mt-3">
<p><strong>File:</strong> {selectedImageName}</p>
{file && (
<p style={styles.fileSize}>
Size: {formatFileSize(file.size)}
</p>
)}
<button className="btn btn-danger" onClick={handleImageCancel}>
<FontAwesomeIcon icon={faTimes} className="me-2" />Cancel
</button>
</div>
)}
{selectedImageName && (
<div className="mt-3">
<p><strong>File:</strong> {selectedImageName}</p>
{file && (
<p style={styles.fileSize}>
Size: {formatFileSize(file.size)}
</p>
)}
<button className="btn btn-danger" onClick={handleImageCancel}>
<FontAwesomeIcon icon={faTimes} className="me-2" />Cancel
</button>
</div>
)}
{errorMessage && <small style={styles.uploadError}>{errorMessage}</small>}
{errorMessage && <small style={styles.uploadError}>{errorMessage}</small>}
{/* Submit Button */}
<div style={styles.submitButton}>