make it work a bit more

src/@types/MetaData.d.ts

@@ -24,12 +24,12 @@ export interface MetaDataPublishForm {
   // ---- required fields ----
   name: string
   description: string
-  files: string
-  termsAndConditions: boolean
+  files: string | File[]
   author: string
   license: string
   price: string
   access: string
+  termsAndConditions: boolean
   // ---- optional fields ----
   copyrightHolder?: string
   tags?: string

src/components/molecules/FilesInput/Input.tsx

@@ -2,18 +2,18 @@ import React, { ReactElement } from 'react'
 import isUrl from 'is-url-superb'
 import Button from '../../atoms/Button'
 import Input from '../../atoms/Input'
-import { useField, FormikProps } from 'formik'
-import { File } from '@oceanprotocol/squid'
+import { useField } from 'formik'
+import Loader from '../../atoms/Loader'
 
 export default function FileInput({
   handleButtonClick,
+  isLoading,
   ...props
 }: {
   handleButtonClick(e: React.SyntheticEvent, data: string): void
-  props: FormikProps<File>
+  isLoading: boolean
 }): ReactElement {
-  const [field, meta, helpers] = useField(props)
-  console.log(field)
+  const [field] = useField(props)
 
   return (
     <>
@@ -22,9 +22,9 @@ export default function FileInput({
       <Button
         size="small"
         onClick={(e: React.SyntheticEvent) => handleButtonClick(e, field.value)}
-        // disabled={!isUrl(field && field.value)}
+        disabled={!field.value || !isUrl(field.value)}
       >
-        Add File
+        {isLoading ? <Loader /> : 'Add File'}
       </Button>
     </>
   )

src/components/molecules/FilesInput/index.tsx

@@ -1,34 +1,29 @@
 import React, { ReactElement, useState } from 'react'
-import isUrl from 'is-url-superb'
 import { useField, FormikProps } from 'formik'
 import { File } from '@oceanprotocol/squid'
 import { toast } from 'react-toastify'
-import Input from '../../atoms/Input'
-import Button from '../../atoms/Button'
-import Loader from '../../atoms/Loader'
-import styles from './index.module.css'
 import FileInfo from './Info'
 import FileInput from './Input'
-import shortid from 'shortid'
 import { getFileInfo } from '../../../utils'
 
 interface Values {
   url: string
 }
 
-export default function FilesInput(props: FormikProps<File>): ReactElement {
+export default function FilesInput(
+  props: FormikProps<Values | File>
+): ReactElement {
   const [field, meta, helpers] = useField(props)
   const [isLoading, setIsLoading] = useState(false)
-  const [file, setFile] = useState<File>()
 
-  const handleButtonClick = async (e: React.SyntheticEvent, url: string) => {
+  async function handleButtonClick(e: React.SyntheticEvent, url: string) {
     // File example 'https://oceanprotocol.com/tech-whitepaper.pdf'
     e.preventDefault()
 
     try {
       setIsLoading(true)
       const newFileInfo = await getFileInfo(url)
-      newFileInfo && setFile(newFileInfo)
+      newFileInfo && helpers.setValue([newFileInfo])
     } catch (error) {
       toast.error('Could not fetch file info. Please check url and try again')
       console.error(error.message)
@@ -38,17 +33,17 @@ export default function FilesInput(props: FormikProps<File>): ReactElement {
   }
 
   function removeItem() {
-    setFile(undefined)
+    helpers.setValue(undefined)
   }
 
   return (
     <>
-      {file ? (
-        <FileInfo file={file} removeItem={removeItem} />
+      {typeof field.value === 'object' ? (
+        <FileInfo file={field.value[0]} removeItem={removeItem} />
       ) : (
         <FileInput
-          {...props}
           {...field}
+          isLoading={isLoading}
           handleButtonClick={handleButtonClick}
         />
       )}

src/components/pages/Publish/PublishForm.tsx

@@ -125,7 +125,7 @@ export default function PublishForm({
               !ocean ||
               !account ||
               isSubmitting ||
-              //! isValid ||
+              !isValid ||
               status === 'empty'
             }
           >

src/components/pages/Publish/utils.ts

@@ -30,9 +30,7 @@ export function transformPublishFormToMetadata(
       author,
       dateCreated: currentTime,
       datePublished: currentTime,
-      // files: {
-      //   url: files
-      // },
+      files: typeof files !== 'string' && files,
       license
     },
     additionalInformation: {