upload image

2023-12-24 16:41:20 +03:30
parent c73568bee4
commit 7a08df3150
3 changed files with 75 additions and 36 deletions
--- a/public/locales/fa/app.json
+++ b/public/locales/fa/app.json
@@ -218,11 +218,14 @@
    "confirm": "ارجاع به معاون حمل و نقل",
    "upload_file": "صورت جلسه کارگروه را بارگذاری کنید",
    "upload_file_required": "وارد کردن صورت جلسه کارگروه الزامیست",
+    "upload_file_second_required": "وارد کردن فرم ب الزامیست",
    "upload_file_unit": "فایل بارگذاری شده باید حداکثر 2Mb باشد",
    "upload_file_format": "فرمت قابل قبول : png,jpg,pdf",
    "print_final_credit_amount": "چاپ صورت جلسه تعیین مبلغ نهایی",
    "max_amount": "حداکثر مبلغ تصویب شده  {value} میلیون ریال می باشد",
-    "excel_report": "گزارش اکسل"
+    "excel_report": "گزارش اکسل",
+    "first_form": "فرم الف را بارگذاری کنید",
+    "second_form": "فرم ب را بارگذاری کنید"
  },
  "RefahiProvinceManager": {
    "name": "نام",
--- a/src/components/dashboard/passenger-boss/Form/ConfirmForm/ConfirmContent.jsx
+++ b/src/components/dashboard/passenger-boss/Form/ConfirmForm/ConfirmContent.jsx
@@ -28,10 +28,10 @@ const vehicle_amount = {
 }
 const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, handleSizeChangeClick}) => {
    const t = useTranslations();
-    const [selectedImage, setSelectedImage] = useState("");
-    const [fileType, setfileType] = useState(null);
-    const [fileName, setfileName] = useState(null);
-    const [showAddIcon, setShowAddIcon] = useState(true);
+    const [selectedImage, setSelectedImage] = useState([null, null]);
+    const [fileTypes, setFileTypes] = useState([null, null]); // Array to hold file types for multiple instances
+    const [fileNames, setFileNames] = useState([null, null]);
+    const [showAddIcon, setShowAddIcon] = useState([true , true]);
    const requestServer = useRequest({auth: true, notification: false})
    const {update_notification} = useNotification();
    const [accordionStates, setAccordionStates] = useState([]);
@@ -85,6 +85,15 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, hand
            .test('fileSize', `${t("PassengerBoss.upload_file_unit")}`, (value) => {
                return value.size <= 2 * 1024 * 1024;
            })
+            .test('fileType', `${t("PassengerBoss.upload_file_format")}`, (value) => {
+                const allowedTypes = ['image/jpg', 'image/jpeg', 'image/png', 'application/pdf']; // Define your allowed file types
+                return allowedTypes.includes(value.type);
+            }),
+        second_img: Yup.mixed()
+            .required(t("PassengerBoss.upload_file_second_required"))
+            .test('fileSize', `${t("PassengerBoss.upload_file_unit")}`, (value) => {
+                return value.size <= 2 * 1024 * 1024;
+            })
            .test('fileType', `${t("PassengerBoss.upload_file_format")}`, (value) => {
                const allowedTypes = ['image/jpg', 'image/jpeg', 'image/png', 'application/pdf']; // Define your allowed file types
                return allowedTypes.includes(value.type);
@@ -95,13 +104,17 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, hand
        initialValues: {
            description: "",
            approved_amount: "",
-            confirm_img: null
+            confirm_img: null,
+            second_img: null
        }, validationSchema,
        onSubmit: (values, {setSubmitting}) => {
            const formData = new FormData();
+            console.log(values)
            formData.append("approved_amount", values.approved_amount);
            if (values.description != "") formData.append("expert_description", values.description);
+
            formData.append("attachment", values.confirm_img);
+            formData.append("second_attachment", values.second_img);

            requestServer(`${CONFIRM_PASSENGER_BOSS}/${rowId}`, 'post', {
                data: formData,
@@ -120,18 +133,32 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, hand
        formik.setFieldValue("description", event.target.value)
    };

-    const handleUploadChange = (event) => {
+    const handleUploadChange = (event , fieldName , index) => {
        const uploadedFile = event.target?.files?.[0];
        if (uploadedFile) {
            const fileType = event.target?.files?.[0].type;
            const fileName = event.target?.files?.[0].name;
-            setSelectedImage(URL.createObjectURL(uploadedFile));
-            setfileType(fileType);
-            setfileName(fileName);
-            formik.setFieldValue("confirm_img", uploadedFile).then(() => {
-                formik.setFieldTouched("confirm_img", true);
+
+            const updatedImages = [...selectedImage];
+            updatedImages[index] = URL.createObjectURL(uploadedFile);
+            setSelectedImage(updatedImages);
+
+            const updatedFileTypes = [...fileTypes];
+            updatedFileTypes[index] = fileType;
+
+            const updatedFileNames = [...fileNames];
+            updatedFileNames[index] = fileName;
+
+            const showAddIconField = [...showAddIcon];
+            showAddIconField[index] = false;
+
+            setFileTypes(updatedFileTypes);
+            setFileNames(updatedFileNames);
+
+            formik.setFieldValue(fieldName, uploadedFile).then(() => {
+                formik.setFieldTouched(fieldName, true);
            })
-            setShowAddIcon(false);
+            setShowAddIcon(showAddIconField);
        }
    };
    const handleAmountChange = (event) => {
@@ -230,15 +257,16 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, hand
                            <Stack>
                                <Grid container spacing={2}>
                                    <Grid item xs={12} sm={6}>
-                                        <Typography>{t("UploadSystem.upload_file")}</Typography>
+                                        <Typography>{t("PassengerBoss.first_form")}</Typography>
                                        <UploadSystem
+                                            index={0}
                                            selectedImage={selectedImage}
-                                            handleUploadChange={handleUploadChange} // Pass the updated function directly
+                                            handleUploadChange={(event) => handleUploadChange(event, "confirm_img" , 0)} // Pass the updated function directly
                                            setselectedImage={setSelectedImage}
                                            setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
                                            fieldname="confirm_img"
-                                            fileType={fileType}
-                                            fileName={fileName}
+                                            fileType={fileTypes[0]}
+                                            fileName={fileNames[0]}
                                            imageAlt={t("app_name")}
                                            imageSize={[250, 150]}
                                            setShowAddIcon={setShowAddIcon}
@@ -256,29 +284,30 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, hand
                                        </FormHelperText>
                                    </Grid>
                                    <Grid item xs={12} sm={6}>
-                                        <Typography>{t("UploadSystem.upload_file")}</Typography>
+                                        <Typography>{t("PassengerBoss.second_form")}</Typography>
                                        <UploadSystem
+                                            index={1}
                                            selectedImage={selectedImage}
-                                            handleUploadChange={handleUploadChange} // Pass the updated function directly
+                                            handleUploadChange={(event) => handleUploadChange(event, "second_img" , 1)} // Pass the updated function directly
                                            setselectedImage={setSelectedImage}
                                            setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
-                                            fieldname="confirm_img"
-                                            fileType={fileType}
-                                            fileName={fileName}
+                                            fieldname="second_img"
+                                            fileType={fileTypes[1]} // Use fileTypes array at index 0 for the first instance
+                                            fileName={fileNames[1]}
                                            imageAlt={t("app_name")}
                                            imageSize={[250, 150]}
                                            setShowAddIcon={setShowAddIcon}
                                            showAddIcon={showAddIcon}
-                                            onBlur={() => formik.handleBlur("confirm_img")}
+                                            onBlur={() => formik.handleBlur("second_img")}
                                            error={
-                                                formik.touched.confirm_img &&
-                                                Boolean(formik.errors.confirm_img)
+                                                formik.touched.second_img &&
+                                                Boolean(formik.errors.second_img)
                                            }
                                        />
                                        <FormHelperText
-                                            error={Boolean(formik.errors.confirm_img)}
+                                            error={Boolean(formik.errors.second_img)}
                                        >
-                                            {formik.touched.confirm_img && formik.errors.confirm_img}
+                                            {formik.touched.second_img && formik.errors.second_img}
                                        </FormHelperText>
                                    </Grid>
                                </Grid>
--- a/src/core/components/UploadSystem.jsx
+++ b/src/core/components/UploadSystem.jsx
@@ -4,7 +4,7 @@ import AddIcon from "@mui/icons-material/Add";
 import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
 import {useRef} from "react";

-const UploadSystem = ({
+const UploadSystem = ({   index,
                          selectedImage,
                          setselectedImage,
                          handleUploadChange,
@@ -22,10 +22,17 @@ const UploadSystem = ({
        fileInputRef.current.click();
    };

-    const handleDeleteImage = () => {
-        setselectedImage(null);
+    const handleDeleteImage = (index) => {
+        const updatedSelectedImages = [...selectedImage];
+        updatedSelectedImages[index] = null;
+        setselectedImage(updatedSelectedImages);
+
        setFieldValue(fieldname, null);
-        setShowAddIcon(true);
+
+        const showAddIconSelected = [...showAddIcon];
+        showAddIconSelected[index] = true;
+        setShowAddIcon(showAddIconSelected);
+
        if (fileInputRef.current) {
            fileInputRef.current.value = "";
        }
@@ -44,8 +51,7 @@ const UploadSystem = ({

    return (
        <Box sx={{width: "100%", my: 1}}>
-            {showAddIcon ? (
-                // Show the add icon and "Upload File" text when no image is selected
+            {showAddIcon[index] ? (
                <>
                    <Box
                        sx={{
@@ -112,7 +118,7 @@ const UploadSystem = ({
                                    backgroundSize: "contain",
                                    backgroundRepeat: "no-repeat",
                                    backgroundPosition: "center",
-                                    backgroundImage: `url(${selectedImage})`,
+                                    backgroundImage: `url(${selectedImage[index]})`,
                                }}
                            ></Paper>
                        </Box>
@@ -154,8 +160,9 @@ const UploadSystem = ({
                        color="error"
                        endIcon={<DeleteForeverIcon/>}
                        variant="contained"
-                        onClick={handleDeleteImage}
+                        onClick={() => handleDeleteImage(index)} // Wrap the function call in an arrow function
                    >
+
                        {t("UploadSystem.delete")}
                    </Button>
                </>
@@ -164,7 +171,7 @@ const UploadSystem = ({
                type="file"
                accept="image/*, .pdf, .doc, .docx, .xls, .xlsx"
                style={{display: "none"}}
-                onChange={handleUploadChange}
+                onChange={(event) => handleUploadChange(event, fieldname, index)}
                ref={fileInputRef}
            />
        </Box>