56 lines
1.4 KiB
JavaScript
56 lines
1.4 KiB
JavaScript
"use client";
|
|
|
|
import { useRef } from "react";
|
|
import { Button } from "@mui/material";
|
|
import ProfileP from "@/components/icons/ProfileP";
|
|
import ArrowLeftPU from "@/components/icons/ArrowLeftPU";
|
|
import { uploadImage } from "@/helper";
|
|
import Image from "next/image";
|
|
|
|
function UploadFile({ image, setImage }) {
|
|
const fileRef = useRef();
|
|
|
|
const openInput = () => fileRef.current.click();
|
|
const handleChange = async (event) => {
|
|
const result = await uploadImage(event);
|
|
setImage(result);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<input
|
|
className="contents"
|
|
ref={fileRef}
|
|
type="file"
|
|
onChange={handleChange}
|
|
/>
|
|
{image && image.blob ? (
|
|
<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 cursor-pointer place-items-center border border-solid border-[#EFEFEF] bg-[#EFEFEF] rounded-full"
|
|
onClick={openInput}
|
|
>
|
|
<ProfileP />
|
|
</div>
|
|
)}
|
|
<Button
|
|
variant="text"
|
|
onClick={openInput}
|
|
className="!flex !p-1 dark:!text-[#A1A1A1] !text-[#525252] !text-[16px] !font-medium !items-center !justify-center !gap-[4px]"
|
|
>
|
|
انتخاب تصویر
|
|
<ArrowLeftPU />
|
|
</Button>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default UploadFile;
|