input file

src/components/dashboard/passenger-office/Form/ConfirmForm.jsx

@@ -8,17 +8,17 @@ import {
   Button,
   TextField,
   FormHelperText,
-  Input,
 } from "@mui/material";
 import { useFormik } from "formik";
 import { useTranslations } from "next-intl";
-import { useState } from "react";
+import { useRef, useState } from "react";
 const MAX_FILE_SIZE_IN_BYTES = 2 * 1024 * 1024;
 
 const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
   const t = useTranslations();
   const [description, setDescription] = useState("");
   const [fileData, setFileData] = useState(null);
+  const inputRef = useRef(null);
 
   const formik = useFormik({
     initialValues: {
@@ -35,18 +35,17 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
     },
   });
 
+  const handleUploadClick = () => {
+    // 👇 We redirect the click event onto the hidden input element
+    inputRef.current?.click();
+  };
+
   const handleDescriptionChange = (event) => {
     setDescription(event.target.value);
     formik.handleChange(event);
   };
 
-  const handleConfirm = () => {
-    handleClose();
-    confirmData(CONFIRM_PASSENGER_OFFICE, rowId);
-  };
-
   const handleFileChange = (e) => {
-    console.log("hiiii");
     const selectedFile = e.target.files[0];
     if (selectedFile) {
       const fileSizeInBytes = selectedFile.size;
@@ -82,45 +81,41 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
           sx={{ mt: 1 }}
         />
         <div>
+          <label htmlFor="fileData">
+            <Button
+              variant="outlined"
+              color="primary"
+              onClick={handleUploadClick}
+              component="span"
+              sx={{ mt: 1, width: "100%" }}
+            >
+              {fileData ? (
+                <>
+                  Name : {fileData.name}
+                  <br />
+                  Size : {fileData.size}
+                </>
+              ) : (
+                <>{t("ConfirmDialog.choose_file")}</>
+              )}
+            </Button>
+          </label>
           <input
             id="fileData"
             name="fileData"
             type="file"
             accept=".pdf, image/*"
+            ref={inputRef}
             onChange={handleFileChange}
             style={{ display: "none" }}
           />
-          <label htmlFor="fileData">
-            <Button
-              id="fileData"
-              name="fileData"
-              variant="outlined"
-              color="primary"
-              component="span"
-              sx={{ mt: 1, width: "100%" }}
-            >
-              {t("ConfirmDialog.choose_file")}
-            </Button>
-          </label>
-          {/* <label htmlFor="fileData">
-            <Button
-              component="span"
-              variant="outlined"
-              color="primary"
-              sx={{ mt: 1, width: "100%", border: "dashed", color: "black " }}
-            >
-              {t("ConfirmDialog.choose_file")}
-            </Button>
-          </label> */}
         </div>
         <FormHelperText error={Boolean(formik.errors.fileData)}>
           {formik.errors.fileData && formik.errors.fileData}
-          {formik.values.fileData &&
-            `Selected file: ${formik.values.fileData.name}`}
         </FormHelperText>
       </DialogContent>
       <DialogActions>
-        <Button onClick={handleConfirm} color="primary">
+        <Button onClick={formik.handleSubmit} color="primary">
           {t("ConfirmDialog.button-confirm")}
         </Button>
         <Button onClick={handleClose} color="secondary" autoFocus>