ImageUploader Userform

web/src/components/UserForm/UserForm.js

@@ -6,10 +6,21 @@ import {
   TextField,
   Submit,
 } from '@redwoodjs/forms'
-
+import { useState } from 'react';
+import { navigate, routes } from '@redwoodjs/router'
+import { useFlash } from '@redwoodjs/web'
+import ImageUploader from '../PartForm/ImageUploader'
 const UserForm = (props) => {
-  const onSubmit = (data) => {
-    props.onSave(data, props?.user?.id)
+  const { addMessage } = useFlash()
+  // const [bio, setBio] = useState(props?.user?.bio)
+  const [imageUrl, setImageUrl] = useState(props?.user?.image)
+  const onSubmit = async (data, e) => {
+
+    await props.onSave({
+      ...data,
+      image: imageUrl
+    }, props?.user?.id)
+    addMessage('User updated.', { classes: 'rw-flash-success' })
   }
 
   return (
@@ -38,7 +49,7 @@ const UserForm = (props) => {
         />
         <FieldError name="email" className="rw-field-error" />
 
-        <Label
+        {/* <Label
           name="image"
           className="rw-label"
           errorClassName="rw-label rw-label-error"
@@ -51,7 +62,8 @@ const UserForm = (props) => {
           className="rw-input"
           errorClassName="rw-input rw-input-error"
         />
-        <FieldError name="image" className="rw-field-error" />
+        <FieldError name="image" className="rw-field-error" /> */}
+        <ImageUploader onImageUpload={({cloudinaryPublicId}) => setImageUrl(cloudinaryPublicId)} />
 
         <Label
           name="bio"
@@ -65,6 +77,7 @@ const UserForm = (props) => {
           defaultValue={props.user?.bio}
           className="rw-input"
           errorClassName="rw-input rw-input-error"
+          validation={{ required: true }}
         />
         <FieldError name="bio" className="rw-field-error" />