46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import type { BoxProps } from '@mui/material/Box';
|
|
|
|
import { Controller, useFormContext } from 'react-hook-form';
|
|
|
|
import Box from '@mui/material/Box';
|
|
|
|
import { HelperText } from './help-text';
|
|
import { UploadAvatar } from '../upload';
|
|
|
|
import type { UploadProps } from '../upload';
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
export type RHFUploadProps = UploadProps & {
|
|
name: string;
|
|
slotProps?: {
|
|
wrapper?: BoxProps;
|
|
};
|
|
};
|
|
|
|
export function RHFUploadAvatar({ name, slotProps, ...other }: RHFUploadProps) {
|
|
const { control, setValue } = useFormContext();
|
|
|
|
return (
|
|
<Controller
|
|
name={name}
|
|
control={control}
|
|
render={({ field, fieldState: { error } }) => {
|
|
const onDrop = (acceptedFiles: File[]) => {
|
|
const value = acceptedFiles[0];
|
|
|
|
setValue(name, value, { shouldValidate: true });
|
|
};
|
|
|
|
return (
|
|
<Box {...slotProps?.wrapper}>
|
|
<UploadAvatar value={field.value} error={!!error} onDrop={onDrop} {...other} />
|
|
|
|
<HelperText errorMessage={error?.message} sx={{ textAlign: 'center' }} />
|
|
</Box>
|
|
);
|
|
}}
|
|
/>
|
|
);
|
|
}
|