Surface thumbnail compatible asset file names

This commit is contained in:
Serkan Reis 2023-09-09 20:39:05 +03:00
parent df0c7a5f1f
commit be2d644ec9

View File

@ -41,6 +41,7 @@ export interface UploadDetailsDataProps {
assetFiles: File[]
metadataFiles: File[]
thumbnailFiles?: File[]
thumbnailCompatibleAssetFileNames?: string[]
uploadService: UploadServiceType
nftStorageApiKey?: string
pinataApiKey?: string
@ -113,6 +114,7 @@ export const UploadDetails = ({
const selectAssets = (event: ChangeEvent<HTMLInputElement>) => {
setAssetFilesArray([])
setMetadataFilesArray([])
setThumbnailFilesArray([])
if (event.target.files === null) return
if (minterType === 'vending' || (minterType === 'base' && event.target.files.length > 1)) {
//sort the files
@ -250,25 +252,25 @@ export const UploadDetails = ({
setThumbnailFilesArray([])
if (event.target.files === null) return
if (minterType === 'vending' || (minterType === 'base' && thumbnailCompatibleAssetFileNames.length > 1)) {
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++) {
if (sortedFileNames[i] !== thumbnailCompatibleAssetFileNames[i]) {
toast.error('The thumbnail file names should match the thumbnail compatible asset file names.')
addLogItem({
id: uid(),
message: 'The thumbnail file names should match the thumbnail compatible asset file names.',
type: 'Error',
timestamp: new Date(),
})
//clear the input
event.target.value = ''
return
}
// if (minterType === 'vending' || (minterType === 'base' && thumbnailCompatibleAssetFileNames.length > 1)) {
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++) {
if (sortedFileNames[i] !== thumbnailCompatibleAssetFileNames[i]) {
toast.error('The thumbnail file names should match the thumbnail compatible asset file names.')
addLogItem({
id: uid(),
message: 'The thumbnail file names should match the thumbnail compatible asset file names.',
type: 'Error',
timestamp: new Date(),
})
//clear the input
event.target.value = ''
return
}
}
// }
let loadedFileCount = 0
const files: File[] = []
let reader: FileReader
@ -296,6 +298,8 @@ export const UploadDetails = ({
const data: UploadDetailsDataProps = {
assetFiles: assetFilesArray,
metadataFiles: metadataFilesArray,
thumbnailFiles: thumbnailFilesArray,
thumbnailCompatibleAssetFileNames,
uploadService,
nftStorageApiKey: nftStorageApiKeyState.value,
pinataApiKey: pinataApiKeyState.value,
@ -325,6 +329,8 @@ export const UploadDetails = ({
}, [
assetFilesArray,
metadataFilesArray,
thumbnailFilesArray,
thumbnailCompatibleAssetFileNames,
uploadService,
nftStorageApiKeyState.value,
pinataApiKeyState.value,
@ -607,6 +613,38 @@ export const UploadDetails = ({
</div>
</div>
)}
{thumbnailCompatibleAssetFileNames.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="thumbnailFiles"
>
{thumbnailCompatibleAssetFileNames.length > 1
? 'Thumbnail Selection for Compatible Assets (optional)'
: 'Thumbnail Selection (optional)'}
</label>
<div
className={clsx(
'flex relative justify-center items-center mx-8 mt-2 space-y-4 w-full h-32',
'rounded border-2 border-white/20 border-dashed',
)}
>
<input
accept="image/*"
className={clsx(
'file:py-2 file:px-4 file:mr-4 file:bg-plumbus-light file:rounded file:border-0 cursor-pointer',
'before:absolute before:inset-0 before:hover:bg-white/5 before:transition',
)}
id="thumbnailFiles"
multiple
onChange={selectThumbnails}
ref={thumbnailFilesRef}
type="file"
/>
</div>
</div>
)}
<Conditional test={assetFilesArray.length >= 1}>
<MetadataModal
assetFile={assetFilesArray[metadataFileArrayIndex]}