update

03_source/frontend/src/components/hook-form/rhf-upload-avatar.tsx

@@ -0,0 +1,45 @@
+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>
+        );
+      }}
+    />
+  );
+}