94 lines
2.5 KiB
TypeScript
94 lines
2.5 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { LoadingOutlined, PlusOutlined } from "@ant-design/icons";
|
|
import { message, Upload } from "antd";
|
|
import type { GetProp, UploadProps } from "antd";
|
|
import useFormField from "../../../Hooks/useFormField";
|
|
|
|
type FileType = Parameters<GetProp<UploadProps, "beforeUpload">>[0];
|
|
|
|
const DropFile = ({
|
|
name,
|
|
label,
|
|
onChange,
|
|
isDisabled,
|
|
placeholder,
|
|
className,
|
|
props,
|
|
no_label,
|
|
label_icon,
|
|
}: any) => {
|
|
const { formik, t, isError } = useFormField(name, props);
|
|
let FormikName = formik?.values[name];
|
|
|
|
const FormikValue =
|
|
typeof FormikName === "string"
|
|
? FormikName
|
|
: FormikName instanceof File
|
|
? URL.createObjectURL(FormikName)
|
|
: "";
|
|
|
|
const [imageUrl, setImageUrl] = useState<any>(FormikValue ?? "");
|
|
|
|
useEffect(() => {
|
|
setImageUrl(FormikName);
|
|
}, [FormikName]);
|
|
|
|
const getBase64 = (img: FileType, callback: (url: string) => void) => {
|
|
const reader = new FileReader();
|
|
reader.addEventListener("load", () => callback(reader.result as string));
|
|
reader.readAsDataURL(img);
|
|
};
|
|
|
|
const handleChange: UploadProps["onChange"] = (info) => {
|
|
if (info.file.status === "done") {
|
|
getBase64(info.file.originFileObj as FileType, (url) => {
|
|
setImageUrl(url);
|
|
});
|
|
}
|
|
formik.setFieldValue(name, info.file.originFileObj);
|
|
};
|
|
const customRequest = async ({ onSuccess }: any) => {
|
|
onSuccess();
|
|
};
|
|
const uploadButton = (
|
|
<button style={{ border: 0, background: "none" }} type="button">
|
|
<div className={`CustomFile ${isError ? "uploader_error" : ""} `}>
|
|
{t("input.drag_and_drop_or_click_here_to_select_the_file")}
|
|
</div>
|
|
</button>
|
|
);
|
|
|
|
return (
|
|
<div className="ValidationField w-100">
|
|
<label htmlFor={name} className="text">
|
|
{t(`input.${label || name}`)}
|
|
</label>
|
|
<Upload
|
|
name="avatar"
|
|
listType="picture-card"
|
|
className={`avatar-uploader ${isError ? "uploader_error" : ""} ${className}`}
|
|
showUploadList={false}
|
|
customRequest={customRequest}
|
|
onChange={onChange || handleChange}
|
|
id={name}
|
|
>
|
|
{imageUrl ? (
|
|
<img
|
|
src={
|
|
imageUrl instanceof File
|
|
? URL.createObjectURL(imageUrl)
|
|
: imageUrl
|
|
}
|
|
alt=""
|
|
style={{ width: "100%" }}
|
|
/>
|
|
) : (
|
|
uploadButton
|
|
)}
|
|
</Upload>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DropFile;
|