87 lines
2.2 KiB
TypeScript
87 lines
2.2 KiB
TypeScript
import { Button, Upload, UploadFile } from "antd";
|
|
import useFormField from "../../../../Hooks/useFormField";
|
|
import { UploadOutlined } from "@ant-design/icons";
|
|
import { useMemo } from "react";
|
|
|
|
const File = ({
|
|
name,
|
|
label,
|
|
onChange,
|
|
isDisabled,
|
|
placholder,
|
|
className,
|
|
props,
|
|
}: any) => {
|
|
|
|
const newName = `QuestionOptions[${name}].answer_image`
|
|
|
|
const { formik, t, isError,errorMsg } = useFormField(newName, props);
|
|
let imageUrl = formik?.values?.QuestionOptions[name]?.answer_image ?? null;
|
|
// console.log(imageUrl);
|
|
console.log(imageUrl);
|
|
|
|
const fileList: UploadFile[] = useMemo(() => {
|
|
if (!imageUrl) return [];
|
|
|
|
return [
|
|
typeof imageUrl === 'string'
|
|
? {
|
|
uid: '-1',
|
|
name: 'uploaded-image',
|
|
status: 'done',
|
|
url: imageUrl,
|
|
thumbUrl: imageUrl,
|
|
}
|
|
: {
|
|
uid: imageUrl.uid || '-1',
|
|
name: imageUrl.name || 'uploaded-image',
|
|
status: 'done',
|
|
originFileObj: imageUrl,
|
|
},
|
|
];
|
|
}, [imageUrl]);
|
|
// console.log(1);
|
|
|
|
const FilehandleChange = (value: any) => {
|
|
// console.log(value,"filevalue");
|
|
if (value.fileList.length === 0) {
|
|
formik.setFieldValue(newName, null);
|
|
} else {
|
|
formik.setFieldValue(`QuestionOptions[${name}].answer_image`, value?.file?.originFileObj);
|
|
|
|
}
|
|
};
|
|
const customRequest = async ({ onSuccess, no_label, label_icon }: any) => {
|
|
onSuccess();
|
|
};
|
|
return (
|
|
<div className={`ValidationField upload_image_button ${className ?? ""} `}>
|
|
<label htmlFor={name} className="text">
|
|
{t(`input.${label || name}`)}
|
|
</label>
|
|
|
|
<Upload
|
|
disabled={isDisabled}
|
|
listType="picture"
|
|
maxCount={1}
|
|
fileList={[...fileList]}
|
|
onChange={onChange || FilehandleChange}
|
|
customRequest={customRequest}
|
|
className={` w-100`}
|
|
>
|
|
<Button
|
|
className={isError ? "isError w-100 " : " w-100"}
|
|
icon={<UploadOutlined />}
|
|
>
|
|
{placholder ?? t("input.Click_to_upload_the_image")}
|
|
|
|
</Button>
|
|
<div className="Error_color"> {isError ? "required" : ""}</div>
|
|
{errorMsg}
|
|
</Upload>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default File;
|