Image First Change

frontend/src/components/FormImagePicker.tsx

@@ -64,6 +64,14 @@ const FormImagePicker = ({
   const showFilename = !isRoundIcon && file;
 
   return (
+    <div>
+      {file && (
+        <img
+          src={file.url || URL.createObjectURL(file)}
+          alt="Preview"
+          className="mb-4 max-h-48 object-contain"
+        />
+      )}
       <div className='flex items-stretch justify-start relative'>
         <label className='inline-flex'>
           <BaseButton
@@ -97,6 +105,8 @@ const FormImagePicker = ({
           </div>
         )}
       </div>
+    </div>
+
   );
 };
 

frontend/src/pages/bottles/bottles-new.tsx

@@ -91,6 +91,21 @@ const BottlesNew = () => {
             onSubmit={(values) => handleSubmit(values)}
           >
             <Form>
+              <FormField label='Picture'>
+                <Field
+                  label='Picture'
+                  color='info'
+                  icon={mdiUpload}
+                  path='bottles/picture'
+                  name='picture'
+                  id='picture'
+                  accept='image/*'
+                  capture
+                  schema={{ size: undefined, formats: undefined }}
+                  component={FormImagePicker}
+                ></Field>
+              </FormField>
+
               <FormField label='Name'>
                 <Field name='name' placeholder='Name' />
               </FormField>
@@ -169,23 +184,6 @@ const BottlesNew = () => {
                 <Field name='barcode' placeholder='Barcode' />
               </FormField>
 
-              <FormField>
-                <Field
-                  label='Picture'
-                  color='info'
-                  icon={mdiUpload}
-                  path={'bottles/picture'}
-                  name='picture'
-                  id='picture'
-                  accept='image/*'
-                  capture
-                  schema={{
-                    size: undefined,
-                    formats: undefined,
-                  }}
-                  component={FormImagePicker}
-                ></Field>
-              </FormField>
 
               <FormField label='Age'>
                 <Field type='number' name='age' placeholder='Age' />