39 lines
957 B
JavaScript
39 lines
957 B
JavaScript
import React, { useState } from "react";
|
|
import { Box, Input, Typography } from "@mui/material";
|
|
|
|
const ImgUploader = () => {
|
|
const [selectedImage, setSelectedImage] = useState(null);
|
|
const [imageUrl, setImageUrl] = useState(null);
|
|
|
|
const handleFileChange = (event) => {
|
|
const selectedFile = event.target.files[0];
|
|
if (selectedFile) {
|
|
const reader = new FileReader();
|
|
reader.onload = () => {
|
|
setSelectedImage(selectedFile);
|
|
setImageUrl(reader.result);
|
|
};
|
|
reader.readAsDataURL(selectedFile);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Box>
|
|
<Typography>سند:</Typography>
|
|
<Input type="file" accept="image/*" onChange={handleFileChange} />
|
|
{selectedImage && (
|
|
<Box mt={2}>
|
|
<img
|
|
src={imageUrl}
|
|
alt="img"
|
|
width="200px"
|
|
style={{ borderRadius: "10px" }}
|
|
/>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default ImgUploader;
|