41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import React, { useState } from 'react';
|
|
|
|
interface InsertImageProps {
|
|
onImageSelected: (file: File | null) => void;
|
|
}
|
|
|
|
const InsertImage: React.FC<InsertImageProps> = ({ onImageSelected }) => {
|
|
const [selectedFile, setSelectedFile] = useState<File | null>(null);
|
|
const [previewImage, setPreviewImage] = useState<string>('');
|
|
|
|
const handleImageSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const selectedFiles = event.target.files as FileList;
|
|
const file = selectedFiles?.[0] || null;
|
|
setSelectedFile(file);
|
|
setPreviewImage(file ? URL.createObjectURL(file) : '');
|
|
onImageSelected(file);
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="flex flex-col items-center p-5 bg-white dark:bg-zinc-800 rounded-md"
|
|
style={{ width: 350, height: 500 }}
|
|
>
|
|
<input
|
|
type="file"
|
|
onChange={handleImageSelect}
|
|
className="mb-4"
|
|
/>
|
|
{selectedFile && (
|
|
<img
|
|
src={previewImage}
|
|
alt="Selected Image"
|
|
className="w-full h-full object-cover rounded-md"
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default InsertImage;
|