upload file
This commit is contained in:
@@ -177,9 +177,6 @@
|
||||
"UploadSystem": {
|
||||
"upload_file": "آپلود فایل",
|
||||
"delete": "پاک کردن",
|
||||
"button-reject": "عدم تایید",
|
||||
"button-cancel": "بستن",
|
||||
"description": "توضیحات",
|
||||
"description_error": "وارد کردن توضیحات الزامی است!"
|
||||
"uploadfile_error": "حجم فایل بیشتر از 2 مگابایت می باشد"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,9 +13,12 @@ import { useState } from "react";
|
||||
import { useFormik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
|
||||
const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
|
||||
const t = useTranslations();
|
||||
const { directionApp } = useDirection();
|
||||
const [proposedAmount, setProposedAmount] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
@@ -55,6 +58,11 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(directionApp, t);
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
|
||||
@@ -13,9 +13,12 @@ import { useFormik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
import { useState } from "react";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
|
||||
const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
|
||||
const t = useTranslations();
|
||||
const { directionApp } = useDirection();
|
||||
const [description, setDescription] = useState("");
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
@@ -47,6 +50,11 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(directionApp, t);
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
|
||||
@@ -13,9 +13,12 @@ import { useState } from "react";
|
||||
import { useFormik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
|
||||
const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
|
||||
const t = useTranslations();
|
||||
const { directionApp } = useDirection();
|
||||
const [proposedAmount, setProposedAmount] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
@@ -56,6 +59,11 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(directionApp, t);
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
|
||||
@@ -13,9 +13,12 @@ import { useFormik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
import { useState } from "react";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
|
||||
const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
|
||||
const t = useTranslations();
|
||||
const { directionApp } = useDirection();
|
||||
const [description, setDescription] = useState("");
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
@@ -43,10 +46,15 @@ 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 maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(directionApp, t);
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import { CONFIRM_PASSENGER_OFFICE } from "@/core/data/apiRoutes";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
import {
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
@@ -8,39 +10,33 @@ import {
|
||||
DialogActions,
|
||||
Button,
|
||||
TextField,
|
||||
FormHelperText,
|
||||
} from "@mui/material";
|
||||
import { useFormik } from "formik";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useRef, useState } from "react";
|
||||
const MAX_FILE_SIZE_IN_BYTES = 2 * 1024 * 1024;
|
||||
|
||||
const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
|
||||
const t = useTranslations();
|
||||
const { directionApp } = useDirection();
|
||||
const [description, setDescription] = useState("");
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
fileData: null,
|
||||
},
|
||||
onSubmit: () => {
|
||||
const formData = new FormData();
|
||||
if (description !== "")
|
||||
formData.append("expert_description", description);
|
||||
if (fileData !== null) formData.append("file", fileData);
|
||||
handleClose();
|
||||
confirmData(CONFIRM_PASSENGER_OFFICE, rowId, formData);
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
setDescription(event.target.value);
|
||||
formik.handleChange(event);
|
||||
@@ -49,6 +45,11 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(directionApp, t);
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
|
||||
@@ -13,15 +13,18 @@ import { useFormik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
import { useState } from "react";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
|
||||
const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
|
||||
const t = useTranslations();
|
||||
const { directionApp } = useDirection();
|
||||
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")),
|
||||
});
|
||||
@@ -46,6 +49,11 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(directionApp, t);
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import { CONFIRM_PROVINCE_MANAGER } from "@/core/data/apiRoutes";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
import {
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
@@ -8,15 +10,14 @@ import {
|
||||
DialogActions,
|
||||
Button,
|
||||
TextField,
|
||||
FormHelperText,
|
||||
} from "@mui/material";
|
||||
import { useFormik } from "formik";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useRef, useState } from "react";
|
||||
const MAX_FILE_SIZE_IN_BYTES = 2 * 1024 * 1024;
|
||||
|
||||
const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
|
||||
const t = useTranslations();
|
||||
const { directionApp } = useDirection();
|
||||
const [description, setDescription] = useState("");
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
@@ -26,13 +27,11 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
fileData: null,
|
||||
},
|
||||
onSubmit: () => {
|
||||
const formData = new FormData();
|
||||
if (description !== "")
|
||||
formData.append("expert_description", description);
|
||||
if (fileData !== null) formData.append("file", fileData);
|
||||
handleClose();
|
||||
confirmData(CONFIRM_PROVINCE_MANAGER, rowId, formData);
|
||||
},
|
||||
@@ -46,6 +45,11 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(directionApp, t);
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
@@ -86,7 +90,6 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose} color="secondary" autoFocus>
|
||||
|
||||
@@ -13,9 +13,12 @@ import { useFormik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
import { useState } from "react";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
|
||||
const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
|
||||
const t = useTranslations();
|
||||
const { directionApp } = useDirection();
|
||||
const [description, setDescription] = useState("");
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
@@ -46,6 +49,11 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(directionApp, t);
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import { CONFIRM_TRANSPORTATION_ASSISTANCE } from "@/core/data/apiRoutes";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
import {
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
@@ -11,10 +13,16 @@ import {
|
||||
import { useFormik } from "formik";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useState } from "react";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
|
||||
const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
|
||||
const t = useTranslations();
|
||||
const { directionApp } = useDirection();
|
||||
const [description, setDescription] = useState("");
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
@@ -31,7 +39,24 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
|
||||
const handleDescriptionChange = (event) => {
|
||||
setDescription(event.target.value);
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(directionApp, t);
|
||||
return;
|
||||
}
|
||||
|
||||
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}>
|
||||
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
|
||||
@@ -48,6 +73,19 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
|
||||
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="confirm_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250 /*width*/, 150 /*height*/]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose} color="secondary" autoFocus>
|
||||
|
||||
@@ -13,6 +13,8 @@ import { useFormik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
import { useState } from "react";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
|
||||
const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
|
||||
const [description, setDescription] = useState("");
|
||||
@@ -21,6 +23,7 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const t = useTranslations();
|
||||
const { directionApp } = useDirection();
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
description: Yup.string().required(t("RejectDialog.description_error")),
|
||||
@@ -46,6 +49,11 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(directionApp, t);
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
|
||||
@@ -92,7 +92,8 @@ const UploadSystem = ({
|
||||
cursor: "pointer",
|
||||
objectFit: "contain",
|
||||
border: "1px solid #b3b3b3",
|
||||
borderRadius: "10px",
|
||||
borderTopRightRadius: "10px",
|
||||
borderTopLeftRadius: "10px",
|
||||
borderBottom: "unset",
|
||||
padding: "5px",
|
||||
}}
|
||||
@@ -106,10 +107,12 @@ const UploadSystem = ({
|
||||
height: imageSize[1],
|
||||
display: "flex",
|
||||
border: "1px solid #b3b3b3",
|
||||
borderRadius: "10px",
|
||||
borderTopRightRadius: "10px",
|
||||
borderTopLeftRadius: "10px",
|
||||
borderBottom: "unset",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
onClick={handleClick}
|
||||
>
|
||||
|
||||
37
src/core/components/notifications/UploadFileNotification.jsx
Normal file
37
src/core/components/notifications/UploadFileNotification.jsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import DangerousIcon from "@mui/icons-material/Dangerous";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import { toast } from "react-toastify";
|
||||
|
||||
const UploadFileNotification = (directionApp, t) => {
|
||||
toast(
|
||||
({ closeToast }) => (
|
||||
<>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "start",
|
||||
justifyContent: "start",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", alignItems: "center" }}>
|
||||
<DangerousIcon color="error" sx={{ mr: 1.6 }} />
|
||||
<Box sx={{ display: "flex", flexDirection: "column" }}>
|
||||
<Typography color="error" variant="button">
|
||||
{t("UploadSystem.uploadfile_error")}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
),
|
||||
{
|
||||
position: directionApp === "ltr" ? "top-left" : "top-right",
|
||||
autoClose: false,
|
||||
closeOnClick: false,
|
||||
draggable: false,
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default UploadFileNotification;
|
||||
Reference in New Issue
Block a user