debug uploading system

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": "تصویر کارت ملی"
   }
 }

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

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}