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

This commit is contained in:
Serkan Reis 2023-09-09 22:01:25 +03:00
parent be2d644ec9
commit 387aa5c703
3 changed files with 54 additions and 10 deletions

View File

@ -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('')

View File

@ -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',

View File

@ -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[],