From 387aa5c70349dfd624a11abbd50e7e64c79a43aa Mon Sep 17 00:00:00 2001 From: Serkan Reis Date: Sat, 9 Sep 2023 22:01:25 +0300 Subject: [PATCH] Update upload & metadata upload logic for standard & 1/1 collections --- .../collections/creation/UploadDetails.tsx | 18 ++++++-- pages/collections/create.tsx | 44 ++++++++++++++++--- services/upload/pinata.ts | 2 +- 3 files changed, 54 insertions(+), 10 deletions(-) diff --git a/components/collections/creation/UploadDetails.tsx b/components/collections/creation/UploadDetails.tsx index 276c09e..a639031 100644 --- a/components/collections/creation/UploadDetails.tsx +++ b/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('') diff --git a/pages/collections/create.tsx b/pages/collections/create.tsx index 46a158d..b9eb557 100644 --- a/pages/collections/create.tsx +++ b/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://${assetUri}/${uploadDetails.assetFiles[i].name}` - + data.image = `ipfs://${ + 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://${assetUri}/${uploadDetails.assetFiles[0].name}` + data.image = `ipfs://${ + 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', diff --git a/services/upload/pinata.ts b/services/upload/pinata.ts index 985de93..d024aab 100644 --- a/services/upload/pinata.ts +++ b/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[],