65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
import { Button, Image, Upload, UploadFile } from "antd";
|
||
import useFormField from "../../Hooks/useFormField";
|
||
import { UploadOutlined } from "@ant-design/icons";
|
||
import { useTranslation } from "react-i18next";
|
||
import { FaRegFilePdf } from "react-icons/fa";
|
||
import { useState } from "react";
|
||
|
||
const PdfUploader = ({
|
||
name,
|
||
label,
|
||
onChange,
|
||
isDisabled,
|
||
placholder,
|
||
className,
|
||
props,
|
||
}: any) => {
|
||
const { formik, t, isError } = useFormField(name, props);
|
||
let FormikName = formik.values[name];
|
||
const imageUrl = formik.values[name] ? FormikName : "";
|
||
const [Imageurl, setImageurl] = useState(null);
|
||
|
||
const FilehandleChange = (value: any) => {
|
||
// console.log(value.file.originFileObj, "value.file.originFileObj");
|
||
|
||
formik.setFieldValue(name, value.file.originFileObj);
|
||
setImageurl(value.file.originFileObj);
|
||
};
|
||
const customRequest = async ({ onSuccess }: any) => {
|
||
onSuccess();
|
||
};
|
||
const UploadProps = {
|
||
name: "file",
|
||
customRequest: customRequest,
|
||
onChange: FilehandleChange,
|
||
headers: {
|
||
authorization: "authorization-text",
|
||
},
|
||
};
|
||
return (
|
||
<div className="PdfUploader">
|
||
<div>ملف الواجب</div>
|
||
<main>
|
||
{Imageurl === null ? (
|
||
<div className="ImagePdfUploader">
|
||
<Image src={"/Icon/Empty_Image.png"} />
|
||
</div>
|
||
) : (
|
||
<div className="ImagePdfUploaderWrapper">
|
||
<Image src={URL.createObjectURL(Imageurl)} />
|
||
</div>
|
||
)}
|
||
|
||
<Upload {...UploadProps}>
|
||
<Button>
|
||
{" "}
|
||
إضافة ورقة <FaRegFilePdf />
|
||
</Button>
|
||
</Upload>
|
||
</main>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default PdfUploader;
|