function UploadImageButton({ ...otherProps }: React.ButtonHTMLAttributes<HTMLButtonElement>) {
const { form, action, handleSubmitWithAction, resetFormAndAction } = useHookFormAction(
uploadImageAction,
zodResolver(uploadImageSchema),
{
actionProps: {},
formProps: {},
errorMapProps: {},
}
);
return (
<form onSubmit={handleSubmitWithAction}>
<Button
{...otherProps}
className="flex flex-row items-center justify-center gap-1 relative overflow-hidden"
size={"sm"}
>
{action.isPending ? (
<StandardLoadingSpinner />
) : (
<>
Upload <ImageUp className="w-4 h-4" />
<input
className="opacity-0 absolute hover:cursor-pointer"
type="file"
onChange={(e) => {
if (e.target.files?.[0]) e.target.closest("form")?.submit();
}}
onClick={(e) => {
const element = e.target as HTMLInputElement;
element.value = "";
}}
accept="image/png, image/jpeg"
/>
</>
)}
</Button>
</form>
);
}
function UploadImageButton({ ...otherProps }: React.ButtonHTMLAttributes<HTMLButtonElement>) {
const { form, action, handleSubmitWithAction, resetFormAndAction } = useHookFormAction(
uploadImageAction,
zodResolver(uploadImageSchema),
{
actionProps: {},
formProps: {},
errorMapProps: {},
}
);
return (
<form onSubmit={handleSubmitWithAction}>
<Button
{...otherProps}
className="flex flex-row items-center justify-center gap-1 relative overflow-hidden"
size={"sm"}
>
{action.isPending ? (
<StandardLoadingSpinner />
) : (
<>
Upload <ImageUp className="w-4 h-4" />
<input
className="opacity-0 absolute hover:cursor-pointer"
type="file"
onChange={(e) => {
if (e.target.files?.[0]) e.target.closest("form")?.submit();
}}
onClick={(e) => {
const element = e.target as HTMLInputElement;
element.value = "";
}}
accept="image/png, image/jpeg"
/>
</>
)}
</Button>
</form>
);
}