Preview assets on metadata modal (#11)

* Name and length check for assets & metadata

* Disable update_metadata button on metadata modal if no metadatafile is specified

* Enable asset preview on metadata modal

* fix: preview error due to missing assets

components/MetadataFormGroup.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react'
+
+export interface MetadataFormGroupProps {
+  title: string
+  subtitle: ReactNode
+  relatedAsset?: File
+  children?: ReactNode
+}
+
+export const MetadataFormGroup = (props: MetadataFormGroupProps) => {
+  const { title, subtitle, relatedAsset, children } = props
+
+  return (
+    <div className="flex p-4 pt-0 space-x-4 w-full">
+      <div className="flex flex-col w-1/3">
+        <label className="flex flex-col space-y-1">
+          <span className="font-bold">{title}</span>
+          {subtitle && <span className="text-sm text-white/50">{subtitle}</span>}
+          <div>
+            {relatedAsset && (
+              <div className="flex flex-row items-center mt-2 mr-4 border-2 border-dashed">
+                <img alt="preview" src={URL.createObjectURL(relatedAsset)} />
+              </div>
+            )}
+          </div>
+        </label>
+      </div>
+      <div className="space-y-4 w-2/3">{children}</div>
+    </div>
+  )
+}

components/MetadataModal.tsx

@@ -5,12 +5,13 @@ import { useMetadataAttributesState } from 'components/forms/MetadataAttributes.
 import { useEffect, useState } from 'react'
 
 import Button from './Button'
-import { FormGroup } from './FormGroup'
 import { TextInput } from './forms/FormInput'
 import { useInputState } from './forms/FormInput.hooks'
 import { MetadataAttributes } from './forms/MetadataAttributes'
+import { MetadataFormGroup } from './MetadataFormGroup'
 
 export interface MetadataModalProps {
+  imageFile: File
   metadataFile: File
   updateMetadata: (metadataFile: File) => void
   updatedMetadataFile: File
@@ -75,7 +76,7 @@ export const MetadataModal = (props: MetadataModalProps) => {
     id: 'image',
     name: 'image',
     title: 'Image',
-    placeholder: 'ipfs://',
+    placeholder: 'Not uploaded yet.',
     defaultValue: imageURL,
   })
 
@@ -108,8 +109,15 @@ export const MetadataModal = (props: MetadataModalProps) => {
     <div>
       <input className="modal-toggle" id="my-modal-4" type="checkbox" />
       <label className="cursor-pointer modal" htmlFor="my-modal-4">
-        <label className="absolute top-5 bottom-5 w-full max-w-5xl max-h-full modal-box" htmlFor="temp">
-          <FormGroup subtitle="" title="Metadata">
+        <label
+          className="absolute top-5 bottom-5 w-full max-w-5xl max-h-full border-2 no-scrollbar modal-box"
+          htmlFor="temp"
+        >
+          <MetadataFormGroup
+            relatedAsset={props.imageFile}
+            subtitle={`Asset name: ${props.imageFile?.name}`}
+            title="Update Metadata"
+          >
             <TextInput {...nameState} onChange={(e) => nameState.onChange(e.target.value)} />
             <TextInput {...descriptionState} onChange={(e) => descriptionState.onChange(e.target.value)} />
             <TextInput {...externalUrlState} onChange={(e) => externalUrlState.onChange(e.target.value)} />
@@ -125,7 +133,8 @@ export const MetadataModal = (props: MetadataModalProps) => {
             <Button isDisabled={!props.metadataFile} onClick={generateUpdatedMetadata}>
               Update Metadata
             </Button>
-          </FormGroup>
+          </MetadataFormGroup>
+
         </label>
       </label>
     </div>

pages/collections/upload.tsx

@@ -417,6 +417,7 @@ const UploadPage: NextPage = () => {
                   </Button>
                 </div>
                 <MetadataModal
+                  imageFile={imageFilesArray[metadataFileArrayIndex]}
                   metadataFile={metadataFilesArray[metadataFileArrayIndex]}
                   refresher={refreshMetadata}
                   updateMetadata={updateMetadataFileArray}