From 124b25f87c9a91c1434e6b230978ce24b6c8146c Mon Sep 17 00:00:00 2001
From: Ehsan <ehsanahmadi8338@gmail.com>
Date: Tue, 1 Oct 2024 10:46:34 +0330
Subject: [PATCH] add upload file to page add-doctor and user-account

---
 .../listMenu/generalInformation/Head.js       | 18 ++++++++++++++---
 components/panel/userAccount/Head.js          | 20 +++++++++++++++----
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/components/panel/addDoctor/listMenu/generalInformation/Head.js b/components/panel/addDoctor/listMenu/generalInformation/Head.js
index 109723b..9a68046 100644
--- a/components/panel/addDoctor/listMenu/generalInformation/Head.js
+++ b/components/panel/addDoctor/listMenu/generalInformation/Head.js
@@ -1,15 +1,27 @@
-import ArrowLeftPU from "@/components/icons/ArrowLeftPU";
-import ProfileP from "@/components/icons/ProfileP";
+"use client";
+
+import { useRef } from "react";
 import { Button } from "@mui/material";
+import ProfileP from "@/components/icons/ProfileP";
+import ArrowLeftPU from "@/components/icons/ArrowLeftPU";
 
 function Head() {
+  const fileRef = useRef();
+
+  const openInput = () => fileRef.current.click();
+
   return (
     <div className="flex items-center justify-center md:justify-start gap-[10px]">
-      <div className="p-[24px] grid place-items-center border border-solid border-[#EFEFEF] bg-[#EFEFEF] rounded-full">
+      <input className="contents" ref={fileRef} type="file" />
+      <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]"
       >
         انتخاب تصویر
diff --git a/components/panel/userAccount/Head.js b/components/panel/userAccount/Head.js
index 3c82023..9a68046 100644
--- a/components/panel/userAccount/Head.js
+++ b/components/panel/userAccount/Head.js
@@ -1,16 +1,28 @@
-import ArrowLeftPU from "@/components/icons/ArrowLeftPU";
-import ProfileP from "@/components/icons/ProfileP";
+"use client";
+
+import { useRef } from "react";
 import { Button } from "@mui/material";
+import ProfileP from "@/components/icons/ProfileP";
+import ArrowLeftPU from "@/components/icons/ArrowLeftPU";
 
 function Head() {
+  const fileRef = useRef();
+
+  const openInput = () => fileRef.current.click();
+
   return (
     <div className="flex items-center justify-center md:justify-start gap-[10px]">
-      <div className="p-[24px] grid place-items-center border border-solid border-[#EFEFEF] bg-[#EFEFEF] rounded-full">
+      <input className="contents" ref={fileRef} type="file" />
+      <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"
-        className="!flex !p-1 !text-[#525252] dark:!text-[#A1A1A1] !text-[14px] md:!text-[16px] !font-medium !items-center !justify-center !gap-[4px]"
+        onClick={() => openInput()}
+        className="!flex !p-1 dark:!text-[#A1A1A1] !text-[#525252] !text-[16px] !font-medium !items-center !justify-center !gap-[4px]"
       >
         انتخاب تصویر
         <ArrowLeftPU />