79 lines
2.0 KiB
JavaScript
79 lines
2.0 KiB
JavaScript
"use client";
|
|
|
|
import { useRef, useState } from "react";
|
|
import { Button } from "@mui/material";
|
|
import ProfileP from "@/components/icons/ProfileP";
|
|
import ArrowLeftPU from "@/components/icons/ArrowLeftPU";
|
|
import { uploadImage } from "@/helper";
|
|
import ModalUpload from "./ModalUpload";
|
|
import Image from "next/image";
|
|
|
|
function UploadFile({ image, setImage }) {
|
|
const fileRef = useRef();
|
|
|
|
const [open, setOpen] = useState(false);
|
|
const [data, setData] = useState();
|
|
|
|
const handleClose = () => setOpen(false);
|
|
const handleOpen = () => setOpen(true);
|
|
|
|
const openInput = () => fileRef.current.click();
|
|
const handleChange = async (event) => {
|
|
if (!!event.target.value) {
|
|
const result = await uploadImage(event);
|
|
handleOpen();
|
|
setData(result);
|
|
}
|
|
};
|
|
|
|
const uploadImg = (prop) => {
|
|
setImage(prop);
|
|
handleClose();
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<ModalUpload
|
|
open={open}
|
|
data={data}
|
|
uploadImg={uploadImg}
|
|
handleClose={handleClose}
|
|
/>
|
|
<input
|
|
type="file"
|
|
ref={fileRef}
|
|
accept="image/*"
|
|
className="contents"
|
|
onChange={handleChange}
|
|
/>
|
|
<div
|
|
onClick={openInput}
|
|
className="flex items-center justify-start gap-[10px] cursor-pointer w-fit"
|
|
>
|
|
{image ? (
|
|
<Image
|
|
width={24}
|
|
height={24}
|
|
src={image.blob}
|
|
alt="img-uploaded"
|
|
className="w-[74px] h-[74px] rounded-full overflow-hidden object-cover"
|
|
/>
|
|
) : (
|
|
<div className="p-[24px] grid place-items-center border border-solid border-[#EFEFEF] bg-[#EFEFEF] rounded-full">
|
|
<ProfileP />
|
|
</div>
|
|
)}
|
|
<Button
|
|
variant="text"
|
|
className="!flex !p-1 dark:!text-[#A1A1A1] !text-[#525252] !text-[16px] !font-medium !items-center !justify-center !gap-[4px]"
|
|
>
|
|
انتخاب تصویر
|
|
<ArrowLeftPU />
|
|
</Button>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default UploadFile;
|