Check matching names and length for assets and metadata (#10)

* Name and length check for assets & metadata

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

components/MetadataModal.tsx

@@ -122,7 +122,9 @@ export const MetadataModal = (props: MetadataModalProps) => {
               subtitle="Enter trait types and values"
               title="Attributes"
             />
-            <Button onClick={generateUpdatedMetadata}>Update Metadata</Button>
+            <Button isDisabled={!props.metadataFile} onClick={generateUpdatedMetadata}>
+              Update Metadata
+            </Button>
           </FormGroup>
         </label>
       </label>

pages/collections/upload.tsx

@@ -83,7 +83,7 @@ const UploadPage: NextPage = () => {
       reader.onload = function (e) {
         if (!e.target?.result) return toast.error('Error parsing file.')
         if (!event.target.files) return toast.error('No files selected.')
-        const metadataFile = new File([e.target.result], event.target.files[i].name, { type: 'image/jpg' })
+        const metadataFile = new File([e.target.result], event.target.files[i].name, { type: 'application/json' })
         setMetadataFilesArray((prev) => [...prev, metadataFile])
       }
       if (!event.target.files) return toast.error('No file selected.')
@@ -95,6 +95,16 @@ const UploadPage: NextPage = () => {
     }
   }
   const updateMetadata = async () => {
+    const metadataFileNames = metadataFilesArray.map((file) => file.name)
+    console.log(metadataFileNames)
+    const imageFileNames = imageFilesArray.map((file) => file.name.substring(0, file.name.lastIndexOf('.')))
+    console.log(imageFileNames)
+    //compare the two arrays to make sure they are the same
+    const areArraysEqual = metadataFileNames.every((val, index) => val === imageFileNames[index])
+    if (!areArraysEqual) {
+      return toast.error('Asset and metadata file names do not match.')
+    }
+
     console.log(imageFilesArray)
     const imageURI = await upload(
       imageFilesArray,
@@ -326,6 +336,7 @@ const UploadPage: NextPage = () => {
           <div>
             <div className="grid grid-cols-2">
               <div className="w-full">
+                <div>
                   <label
                     className="block mt-5 mr-1 mb-1 ml-8 w-full font-bold text-white dark:text-gray-300"
                     htmlFor="imageFiles"
@@ -351,7 +362,10 @@ const UploadPage: NextPage = () => {
                       type="file"
                     />
                   </div>
+                </div>
 
+                {imageFilesArray.length > 0 && (
+                  <div>
                     <label
                       className="block mt-5 mr-1 mb-1 ml-8 w-full font-bold text-white dark:text-gray-300"
                       htmlFor="metadataFiles"
@@ -377,9 +391,28 @@ const UploadPage: NextPage = () => {
                         type="file"
                       />
                     </div>
+                  </div>
+                )}
+                <Conditional
+                  test={
+                    imageFilesArray.length > 0 &&
+                    metadataFilesArray.length > 0 &&
+                    imageFilesArray.length !== metadataFilesArray.length
+                  }
+                >
+                  <Alert className="mt-4 ml-8 w-3/4" type="warning">
+                    The number of assets and metadata files should match.
+                  </Alert>
+                </Conditional>
 
                 <div className="mt-5 ml-8">
-                  <Button className="w-[120px]" isWide onClick={updateMetadata} variant="solid">
+                  <Button
+                    className="mb-8 w-[120px]"
+                    isDisabled={imageFilesArray.length === 0 || imageFilesArray.length !== metadataFilesArray.length}
+                    isWide
+                    onClick={updateMetadata}
+                    variant="solid"
+                  >
                     Upload
                   </Button>
                 </div>
@@ -390,10 +423,9 @@ const UploadPage: NextPage = () => {
                   updatedMetadataFile={updatedMetadataFilesArray[metadataFileArrayIndex]}
                 />
               </div>
-
+              {imageFilesArray.length > 0 && (
                 <div className="mt-2 mr-10 ml-20 w-4/5 h-96 border-2 border-dashed carousel carousel-vertical rounded-box">
-                {imageFilesArray.length > 0 &&
+                  {imageFilesArray.map((imageSource, index) => (
-                  imageFilesArray.map((imageSource, index) => (
                     <div key={`carousel-item-${index}`} className="w-full carousel-item h-1/8">
                       <div className="grid grid-cols-4 col-auto">
                         <Conditional test={imageFilesArray.length > 4 * index}>
@@ -500,6 +532,7 @@ const UploadPage: NextPage = () => {
                     </div>
                   ))}
                 </div>
+              )}
             </div>
           </div>
         </div>