From 7df12b0f450d842dd62ca7362650c0807729d527 Mon Sep 17 00:00:00 2001
From: Mohammad Jalali <muhammad.art79@gmail.com>
Date: Wed, 19 Jul 2023 10:34:46 +0330
Subject: [PATCH] debug uploading system

---
 public/locales/fa/app.json                          |  4 +++-
 .../dashboard/loan-request/WelfareServicesForm.jsx  |  6 ++++--
 src/core/components/UploadSystem.jsx                | 13 +++++++++++++
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json
index 138c4b9..9359b01 100644
--- a/public/locales/fa/app.json
+++ b/public/locales/fa/app.json
@@ -98,6 +98,8 @@
     "text_field_enter_your_shenasname_id": "شماره شناسنامه خود را وارد کنید",
     "text_field_plate_number": "شماره پلاک",
     "text_field_enter_your_plate_number": "شماره پلاک خود را وارد کنید",
-    "button_submit": "ثبت درخواست"
+    "button_submit": "ثبت درخواست",
+    "file_field_shenasname_image": "تصویر شناسنامه",
+    "file_field_national_card_image": "تصویر کارت ملی"
   }
 }
diff --git a/src/components/dashboard/loan-request/WelfareServicesForm.jsx b/src/components/dashboard/loan-request/WelfareServicesForm.jsx
index 4ea21b6..335da6c 100644
--- a/src/components/dashboard/loan-request/WelfareServicesForm.jsx
+++ b/src/components/dashboard/loan-request/WelfareServicesForm.jsx
@@ -29,9 +29,9 @@ const WelfareServicesForm = () => {
 
   const handleUploadChangeShenasname = (event, setFieldValue) => {
     const uploadedFile = event.target?.files?.[0];
-    const fileType = event.target.files[0].type;
-    const fileName = event.target.files[0].name;
     if (uploadedFile) {
+      const fileType = event.target?.files?.[0].type;
+      const fileName = event.target?.files?.[0].name;
       setSelectedImageShenasname(URL.createObjectURL(uploadedFile));
       setFileTypeShenasname(fileType);
       setFileNameShenasname(fileName);
@@ -380,6 +380,7 @@ const WelfareServicesForm = () => {
                 fileName={fileNameShenasname}
                 imageAlt={t("app_name")}
                 imageSize={[300 /*width*/, 150 /*height*/]}
+                label={t("LoanRequest.file_field_shenasname_image")}
               />
               <UploadSystem
                 selectedImage={selectedImageNationalCard}
@@ -393,6 +394,7 @@ const WelfareServicesForm = () => {
                 fileName={fileNameNationalCard}
                 imageAlt={t("app_name")}
                 imageSize={[300 /*width*/, 150 /*height*/]}
+                label={t("LoanRequest.file_field_national_card_image")}
               />
             </Box>
             <Box
diff --git a/src/core/components/UploadSystem.jsx b/src/core/components/UploadSystem.jsx
index b60552a..3523c3e 100644
--- a/src/core/components/UploadSystem.jsx
+++ b/src/core/components/UploadSystem.jsx
@@ -14,6 +14,7 @@ const UploadSystem = ({
   imageSize,
   fileType,
   fileName,
+  label,
 }) => {
   const t = useTranslations();
   const fileInputRef = useRef(null);
@@ -39,6 +40,17 @@ const UploadSystem = ({
 
   return (
     <Box sx={{ width: imageSize[0], my: 2 }}>
+      <Typography
+        margin={2}
+        sx={{
+          fontWeight: 500,
+          fontSize: "1rem",
+          color: "#a19d9d",
+        }}
+        textAlign="center"
+      >
+        {label}
+      </Typography>
       {selectedImage === "/images/upload-image.svg" ? (
         <Image
           width={imageSize[0]}
@@ -84,6 +96,7 @@ const UploadSystem = ({
               alignItems: "center",
               justifyContent: "center",
             }}
+            onClick={handleClick}
           >
             <Typography
               margin={2}