loan/expert-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upload_file

Browse Source
This commit is contained in:
Yasiu1376
2023-07-22 15:51:44 +03:30
parent 176347fb4b
commit cd51ee14ab
11 changed files with 434 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/dashboard/machinary-office/Form/ConfirmForm.jsx
View File

@@ -12,11 +12,16 @@ import { useTranslations } from "next-intl";
import { useState } from "react";
import { useFormik } from "formik";
import * as Yup from "yup";
import UploadSystem from "@/core/components/UploadSystem";
const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
const t = useTranslations();
const [proposedAmount, setProposedAmount] = useState("");
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
//formik
const validationSchema = Yup.object().shape({
@@ -47,6 +52,18 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
formik.handleChange(event);
};
const handleUploadChange = (event) => {
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);
setShowAddIcon(false);
}
};
return (
<Dialog open={open} onClose={handleClose}>
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
@@ -86,6 +103,19 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
sx={{ mt: 1 }}
fullWidth
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={formik.handleSubmit} color="primary">

31
src/components/dashboard/machinary-office/Form/RejectForm.jsx
View File

@@ -12,10 +12,15 @@ import { useTranslations } from "next-intl";
import { useFormik } from "formik";
import * as Yup from "yup";
import { useState } from "react";
import UploadSystem from "@/core/components/UploadSystem";
const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
const t = useTranslations();
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const validationSchema = Yup.object().shape({
description: Yup.string().required(t("RejectDialog.description_error")),
@@ -39,6 +44,19 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
formik.handleChange(event);
};
const handleUploadChange = (event) => {
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("reject_img", uploadedFile);
setShowAddIcon(false);
}
};
return (
<Dialog open={open} onClose={handleClose}>
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
@@ -60,6 +78,19 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
variant="outlined"
sx={{ mt: 1 }}
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="reject_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={formik.handleSubmit} color="primary">

30
src/components/dashboard/passenger-boss/Form/ConfirmForm.jsx
View File

@@ -12,11 +12,16 @@ import { useTranslations } from "next-intl";
import { useState } from "react";
import { useFormik } from "formik";
import * as Yup from "yup";
import UploadSystem from "@/core/components/UploadSystem";
const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
const t = useTranslations();
const [proposedAmount, setProposedAmount] = useState("");
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
//formik
const validationSchema = Yup.object().shape({
@@ -48,6 +53,18 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
}
formik.handleChange(event);
};
const handleUploadChange = (event) => {
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);
setShowAddIcon(false);
}
};
return (
<Dialog open={open} onClose={handleClose}>
@@ -88,6 +105,19 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
sx={{ mt: 1 }}
fullWidth
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={formik.handleSubmit} color="primary">

31
src/components/dashboard/passenger-boss/Form/RejectForm.jsx
View File

@@ -12,10 +12,15 @@ import { useTranslations } from "next-intl";
import { useFormik } from "formik";
import * as Yup from "yup";
import { useState } from "react";
import UploadSystem from "@/core/components/UploadSystem";
const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
const t = useTranslations();
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const validationSchema = Yup.object().shape({
description: Yup.string().required(t("RejectDialog.description_error")),
@@ -38,6 +43,19 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
setDescription(event.target.value);
formik.handleChange(event);
};
const handleUploadChange = (event) => {
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("reject_img", uploadedFile);
setShowAddIcon(false);
}
};
return (
<Dialog open={open} onClose={handleClose}>
@@ -60,6 +78,19 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
variant="outlined"
sx={{ mt: 1 }}
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="reject_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={formik.handleSubmit} color="primary">

84
src/components/dashboard/passenger-office/Form/ConfirmForm.jsx
View File

@@ -1,3 +1,4 @@
import UploadSystem from "@/core/components/UploadSystem";
import { CONFIRM_PASSENGER_OFFICE } from "@/core/data/apiRoutes";
import {
Dialog,
@@ -17,8 +18,11 @@ 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 [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const formik = useFormik({
initialValues: {
@@ -35,31 +39,23 @@ 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 handleFileChange = (e) => {
const selectedFile = e.target.files[0];
if (selectedFile) {
const fileSizeInBytes = selectedFile.size;
if (fileSizeInBytes > MAX_FILE_SIZE_IN_BYTES) {
formik.setFieldError(
"fileData",
`File size exceeds the limit (${MAX_FILE_SIZE_IN_BYTES / 1000000} MB)`
);
e.target.value = null;
} else {
setFileData(selectedFile);
formik.setFieldValue("fileData", selectedFile);
formik.setFieldError("fileData", "");
}
const handleUploadChange = (event) => {
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);
setShowAddIcon(false);
}
};
@@ -80,39 +76,19 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
variant="outlined"
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" }}
/>
</div>
<FormHelperText error={Boolean(formik.errors.fileData)}>
{formik.errors.fileData && formik.errors.fileData}
</FormHelperText>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={formik.handleSubmit} color="primary">

33
src/components/dashboard/passenger-office/Form/RejectForm.jsx
View File

@@ -12,11 +12,16 @@ import { useTranslations } from "next-intl";
import { useFormik } from "formik";
import * as Yup from "yup";
import { useState } from "react";
import UploadSystem from "@/core/components/UploadSystem";
const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
const t = useTranslations();
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const validationSchema = Yup.object().shape({
description: Yup.string().required(t("RejectDialog.description_error")),
});
@@ -38,7 +43,18 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
setDescription(event.target.value);
formik.handleChange(event);
};
const handleUploadChange = (event) => {
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("reject_img", uploadedFile);
setShowAddIcon(false);
}
};
return (
<Dialog open={open} onClose={handleClose}>
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
@@ -60,6 +76,19 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
variant="outlined"
sx={{ mt: 1 }}
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="reject_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={formik.handleSubmit} color="primary">

84
src/components/dashboard/province-manager/Form/ConfirmForm.jsx
View File

@@ -1,3 +1,4 @@
import UploadSystem from "@/core/components/UploadSystem";
import { CONFIRM_PROVINCE_MANAGER } from "@/core/data/apiRoutes";
import {
Dialog,
@@ -17,8 +18,10 @@ 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 [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const formik = useFormik({
initialValues: {
@@ -35,31 +38,21 @@ 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 handleFileChange = (e) => {
const selectedFile = e.target.files[0];
if (selectedFile) {
const fileSizeInBytes = selectedFile.size;
if (fileSizeInBytes > MAX_FILE_SIZE_IN_BYTES) {
formik.setFieldError(
"fileData",
`File size exceeds the limit (${MAX_FILE_SIZE_IN_BYTES / 1000000} MB)`
);
e.target.value = null;
} else {
setFileData(selectedFile);
formik.setFieldValue("fileData", selectedFile);
formik.setFieldError("fileData", "");
}
const handleUploadChange = (event) => {
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);
setShowAddIcon(false);
}
};
@@ -80,39 +73,20 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
variant="outlined"
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" }}
/>
</div>
<FormHelperText error={Boolean(formik.errors.fileData)}>
{formik.errors.fileData && formik.errors.fileData}
</FormHelperText>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={formik.handleSubmit} color="primary">

30
src/components/dashboard/province-manager/Form/RejectForm.jsx
View File

@@ -12,10 +12,15 @@ import { useTranslations } from "next-intl";
import { useFormik } from "formik";
import * as Yup from "yup";
import { useState } from "react";
import UploadSystem from "@/core/components/UploadSystem";
const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
const t = useTranslations();
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const validationSchema = Yup.object().shape({
description: Yup.string().required(t("RejectDialog.description_error")),
@@ -38,6 +43,18 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
setDescription(event.target.value);
formik.handleChange(event);
};
const handleUploadChange = (event) => {
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("reject_img", uploadedFile);
setShowAddIcon(false);
}
};
return (
<Dialog open={open} onClose={handleClose}>
@@ -60,6 +77,19 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
variant="outlined"
sx={{ mt: 1 }}
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="reject_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={formik.handleSubmit} color="primary">

31
src/components/dashboard/transportation-assistance/Form/RejectForm.jsx
View File

@@ -12,9 +12,14 @@ import { useTranslations } from "next-intl";
import { useFormik } from "formik";
import * as Yup from "yup";
import { useState } from "react";
import UploadSystem from "@/core/components/UploadSystem";
const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const t = useTranslations();
const validationSchema = Yup.object().shape({
@@ -38,7 +43,18 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
setDescription(event.target.value);
formik.handleChange(event);
};
const handleUploadChange = (event) => {
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("reject_img", uploadedFile);
setShowAddIcon(false);
}
};
return (
<Dialog open={open} onClose={handleClose}>
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
@@ -60,6 +76,19 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
variant="outlined"
sx={{ mt: 1 }}
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="reject_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={formik.handleSubmit} color="primary">