50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import { Button, Upload } from 'antd';
|
|
import { UploadOutlined } from '@ant-design/icons';
|
|
import useFormField from '../../../Hooks/useFormField';
|
|
|
|
const MaltyFile = ({ name, label, onChange, isDisabled, placholder, className, props }: any) => {
|
|
const { formik, t, isError } = useFormField(name, props);
|
|
const fileList = formik?.values[name] ? formik?.values[name]?.map((file: any, index: number) => ({
|
|
uid: index,
|
|
name: file.name,
|
|
status: 'done',
|
|
url: file.url || '',
|
|
thumbUrl: file.url || '',
|
|
})) : [];
|
|
|
|
const FilehandleChange = ({ file, fileList }: any) => {
|
|
formik.setFieldValue(name, fileList.map((file: any) => file.originFileObj));
|
|
};
|
|
|
|
const customRequest = async ({ onSuccess }: any) => {
|
|
// Perform any necessary actions before onSuccess is called
|
|
onSuccess();
|
|
};
|
|
|
|
return (
|
|
<div className="ValidationField">
|
|
<label htmlFor={name} className="text">
|
|
{t(`${label || name}`)}
|
|
</label>
|
|
|
|
<Upload
|
|
disabled={isDisabled}
|
|
listType="picture"
|
|
defaultFileList={[...fileList]}
|
|
onChange={onChange || FilehandleChange}
|
|
customRequest={customRequest}
|
|
className={`${className} w-100`}
|
|
multiple // Allow multiple files to be selected
|
|
|
|
>
|
|
<Button className={isError ? "isError w-100" : " w-100"} icon={<UploadOutlined />}>
|
|
{placholder ?? t("upload_image")}
|
|
</Button>
|
|
<div className='Error_color'> {isError ? "required" : ""}</div>
|
|
</Upload>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MaltyFile;
|