Update upload & metadata upload logic for standard & 1/1 collections

components/collections/creation/UploadDetails.tsx

@@ -115,14 +115,15 @@ export const UploadDetails = ({
     setAssetFilesArray([])
     setMetadataFilesArray([])
     setThumbnailFilesArray([])
+    setThumbnailCompatibleAssetFileNames([])
     if (event.target.files === null) return
+    const thumbnailCompatibleAssetTypes: AssetType[] = ['video', 'audio', 'html']
+    const thumbnailCompatibleFileNamesList: string[] = []
     if (minterType === 'vending' || (minterType === 'base' && event.target.files.length > 1)) {
       //sort the files
       const sortedFiles = Array.from(event.target.files).sort((a, b) => naturalCompare(a.name, b.name))
       //check if the sorted file names are in numerical order
       const sortedFileNames = sortedFiles.map((file) => file.name.split('.')[0])
-      const thumbnailCompatibleAssetTypes: AssetType[] = ['video', 'audio', 'html']
-      const thumbnailCompatibleFileNamesList: string[] = []
       sortedFiles.map((file) => {
         if (thumbnailCompatibleAssetTypes.includes(getAssetType(file.name))) {
           thumbnailCompatibleFileNamesList.push(file.name.split('.')[0])
@@ -144,7 +145,14 @@ export const UploadDetails = ({
           return
         }
       }
+    } else if (minterType === 'base' && event.target.files.length === 1) {
+      if (thumbnailCompatibleAssetTypes.includes(getAssetType(event.target.files[0].name))) {
+        thumbnailCompatibleFileNamesList.push(event.target.files[0].name.split('.')[0])
       }
+      setThumbnailCompatibleAssetFileNames(thumbnailCompatibleFileNamesList)
+      console.log('Thumbnail Compatible Files: ', thumbnailCompatibleFileNamesList)
+    }
+
     let loadedFileCount = 0
     const files: File[] = []
     let reader: FileReader
@@ -256,7 +264,8 @@ export const UploadDetails = ({
     const sortedFiles = Array.from(event.target.files).sort((a, b) => naturalCompare(a.name, b.name))
     const sortedFileNames = sortedFiles.map((file) => file.name.split('.')[0])
     // make sure the sorted file names match thumbnail compatible asset file names
-    for (let i = 0; i < sortedFileNames.length; i++) {
+    for (let i = 0; i < thumbnailCompatibleAssetFileNames.length; i++) {
+      if (minterType === 'base' && assetFilesArray.length === 1) break
       if (sortedFileNames[i] !== thumbnailCompatibleAssetFileNames[i]) {
         toast.error('The thumbnail file names should match the thumbnail compatible asset file names.')
         addLogItem({
@@ -347,6 +356,9 @@ export const UploadDetails = ({
     setMetadataFilesArray([])
     if (assetFilesRef.current) assetFilesRef.current.value = ''
     setAssetFilesArray([])
+    if (thumbnailFilesRef.current) thumbnailFilesRef.current.value = ''
+    setThumbnailFilesArray([])
+    setThumbnailCompatibleAssetFileNames([])
     if (!importedUploadDetails || minterType === 'base') {
       baseTokenUriState.onChange('')
       coverImageUrlState.onChange('')

pages/collections/create.tsx

@@ -734,7 +734,19 @@ const CollectionCreationPage: NextPage = () => {
         uploadDetails.pinataApiKey as string,
         uploadDetails.pinataSecretKey as string,
       )
-        .then((assetUri: string) => {
+        .then(async (assetUri: string) => {
+          let thumbnailUri: string | undefined
+          if (uploadDetails.thumbnailFiles && uploadDetails.thumbnailFiles.length > 0) {
+            thumbnailUri = await upload(
+              uploadDetails.thumbnailFiles,
+              uploadDetails.uploadService,
+              'thumbnail',
+              uploadDetails.nftStorageApiKey as string,
+              uploadDetails.pinataApiKey as string,
+              uploadDetails.pinataSecretKey as string,
+            )
+          }
+          console.log('Thumbnail URI: ', thumbnailUri)
           if (minterType === 'vending' || (minterType === 'base' && uploadDetails.assetFiles.length > 1)) {
             const fileArray: File[] = []
             let reader: FileReader
@@ -751,9 +763,24 @@ const CollectionCreationPage: NextPage = () => {
                 ) {
                   data.animation_url = `ipfs://${assetUri}/${uploadDetails.assetFiles[i].name}`
                 }
-                if (getAssetType(uploadDetails.assetFiles[i].name) !== 'html')
+                data.image = `ipfs://${
-                  data.image = `ipfs://${assetUri}/${uploadDetails.assetFiles[i].name}`
+                  thumbnailUri &&
-
+                  (uploadDetails.thumbnailCompatibleAssetFileNames as string[]).includes(
+                    uploadDetails.assetFiles[i].name.split('.')[0],
+                  )
+                    ? thumbnailUri
+                    : assetUri
+                }/${
+                  thumbnailUri &&
+                  (uploadDetails.thumbnailCompatibleAssetFileNames as string[]).includes(
+                    uploadDetails.assetFiles[i].name.split('.')[0],
+                  )
+                    ? uploadDetails.thumbnailFiles?.find(
+                        (thumbnailFile) =>
+                          thumbnailFile.name.split('.')[0] === uploadDetails.assetFiles[i].name.split('.')[0],
+                      )?.name
+                    : uploadDetails.assetFiles[i].name
+                }`
                 if (data.description) {
                   // eslint-disable-next-line @typescript-eslint/no-unsafe-call
                   data.description = data.description.replaceAll('\\n', '\n')
@@ -805,8 +832,13 @@ const CollectionCreationPage: NextPage = () => {
               ) {
                 data.animation_url = `ipfs://${assetUri}/${uploadDetails.assetFiles[0].name}`
               }
-              if (getAssetType(uploadDetails.assetFiles[0].name) !== 'html')
+              data.image = `ipfs://${
-                data.image = `ipfs://${assetUri}/${uploadDetails.assetFiles[0].name}`
+                uploadDetails.thumbnailFiles && uploadDetails.thumbnailFiles.length > 0 ? thumbnailUri : assetUri
+              }/${
+                uploadDetails.thumbnailFiles && uploadDetails.thumbnailFiles.length > 0
+                  ? uploadDetails.thumbnailFiles[0].name
+                  : uploadDetails.assetFiles[0].name
+              }`
 
               const metadataFileBlob = new Blob([JSON.stringify(data)], {
                 type: 'application/json',

services/upload/pinata.ts

@@ -4,7 +4,7 @@
 import axios from 'axios'
 import { PINATA_ENDPOINT_URL } from 'utils/constants'
 
-export type UploadFileType = 'assets' | 'metadata' | 'cover'
+export type UploadFileType = 'assets' | 'metadata' | 'cover' | 'thumbnail'
 
 export const uploadToPinata = async (
   fileArray: File[],