70 lines
1.9 KiB
TypeScript
70 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
|
|
interface ImageUploadProps {
|
|
imageFiles: File[];
|
|
imagePreviews: string[];
|
|
onImageChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
onRemoveImage: (index: number) => void;
|
|
error: string;
|
|
}
|
|
|
|
const ImageUpload: React.FC<ImageUploadProps> = ({
|
|
imageFiles,
|
|
imagePreviews,
|
|
onImageChange,
|
|
onRemoveImage,
|
|
error
|
|
}) => {
|
|
return (
|
|
<div className="card mb-4">
|
|
<div className="card-body">
|
|
<div className="mb-3">
|
|
<label className="form-label mb-0">
|
|
Upload Images (Max 5)
|
|
</label>
|
|
<div className="form-text mb-2">
|
|
Have pictures of everything that's included
|
|
</div>
|
|
<input
|
|
type="file"
|
|
className="form-control"
|
|
onChange={onImageChange}
|
|
accept="image/*"
|
|
multiple
|
|
disabled={imageFiles.length >= 5}
|
|
/>
|
|
</div>
|
|
|
|
{imagePreviews.length > 0 && (
|
|
<div className="row mt-3">
|
|
{imagePreviews.map((preview, index) => (
|
|
<div key={index} className="col-6 col-md-4 col-lg-3 mb-3">
|
|
<div className="position-relative">
|
|
<img
|
|
src={preview}
|
|
alt={`Preview ${index + 1}`}
|
|
className="img-fluid rounded"
|
|
style={{
|
|
width: "100%",
|
|
height: "150px",
|
|
objectFit: "cover",
|
|
}}
|
|
/>
|
|
<button
|
|
type="button"
|
|
className="btn btn-sm btn-danger position-absolute top-0 end-0 m-1"
|
|
onClick={() => onRemoveImage(index)}
|
|
>
|
|
<i className="bi bi-x"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ImageUpload; |