103 lines
3.0 KiB
JavaScript
103 lines
3.0 KiB
JavaScript
import { useRef, useState } from "react";
|
||
import "../../styles/ImageUploadModal.css";
|
||
|
||
export default function ImageUploadModal({ itemName, onConfirm, onSkip, onCancel }) {
|
||
const [selectedImage, setSelectedImage] = useState(null);
|
||
const [imagePreview, setImagePreview] = useState(null);
|
||
const cameraInputRef = useRef(null);
|
||
const galleryInputRef = useRef(null);
|
||
|
||
const handleImageChange = (e) => {
|
||
const file = e.target.files[0];
|
||
if (file) {
|
||
setSelectedImage(file);
|
||
const reader = new FileReader();
|
||
reader.onloadend = () => {
|
||
setImagePreview(reader.result);
|
||
};
|
||
reader.readAsDataURL(file);
|
||
}
|
||
};
|
||
|
||
const removeImage = () => {
|
||
setSelectedImage(null);
|
||
setImagePreview(null);
|
||
};
|
||
|
||
const handleConfirm = () => {
|
||
onConfirm(selectedImage);
|
||
};
|
||
|
||
const handleCancel = () => {
|
||
if (onCancel) {
|
||
onCancel();
|
||
}
|
||
};
|
||
|
||
const handleCameraClick = () => {
|
||
cameraInputRef.current?.click();
|
||
};
|
||
|
||
const handleGalleryClick = () => {
|
||
galleryInputRef.current?.click();
|
||
};
|
||
|
||
return (
|
||
<div className="image-upload-modal-overlay" onClick={handleCancel}>
|
||
<div className="image-upload-modal" onClick={(e) => e.stopPropagation()}>
|
||
<h2>Add Image for "{itemName}"</h2>
|
||
<p className="image-upload-subtitle">This is a new item. Would you like to add a verification image?</p>
|
||
|
||
<div className="image-upload-content">
|
||
{!imagePreview ? (
|
||
<div className="image-upload-options">
|
||
<button onClick={handleCameraClick} className="image-upload-option-btn camera">
|
||
📷 Use Camera
|
||
</button>
|
||
<button onClick={handleGalleryClick} className="image-upload-option-btn gallery">
|
||
🖼️ Choose from Gallery
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<div className="modal-image-preview">
|
||
<img src={imagePreview} alt="Preview" />
|
||
<button type="button" onClick={removeImage} className="modal-remove-image">
|
||
×
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<input
|
||
ref={cameraInputRef}
|
||
type="file"
|
||
accept="image/*"
|
||
capture="environment"
|
||
onChange={handleImageChange}
|
||
style={{ display: "none" }}
|
||
/>
|
||
|
||
<input
|
||
ref={galleryInputRef}
|
||
type="file"
|
||
accept="image/*"
|
||
onChange={handleImageChange}
|
||
style={{ display: "none" }}
|
||
/>
|
||
|
||
<div className="image-upload-actions">
|
||
<button onClick={handleCancel} className="image-upload-cancel">
|
||
Cancel
|
||
</button>
|
||
<button onClick={onSkip} className="image-upload-skip">
|
||
Skip
|
||
</button>
|
||
<button onClick={handleConfirm} className="image-upload-confirm" disabled={!selectedImage}>
|
||
{selectedImage ? "Add with Image" : "Select an Image"}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|