upload image
This commit is contained in:
Yasiu1376
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user