Preview & upload support for audio & video files (#14)

* Accept audio & video files for upload

* Rename image related variables

* Implement getAssetType util

* Preview & upload support for video files

* Preview & upload support for audio files

* Preview update for audio files

* New look for audio previews on asset list

* Remove extra refs

Co-authored-by: findolor <anakisci@gmail.com>

components/MetadataFormGroup.tsx

@@ -1,4 +1,7 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable jsx-a11y/media-has-caption */
 import type { ReactNode } from 'react'
+import { getAssetType } from 'utils/getAssetType'
 
 export interface MetadataFormGroupProps {
   title: string
@@ -19,7 +22,27 @@ export const MetadataFormGroup = (props: MetadataFormGroupProps) => {
           <div>
             {relatedAsset && (
               <div className="flex flex-row items-center mt-2 mr-4 border-2 border-dashed">
-                <img alt="preview" src={URL.createObjectURL(relatedAsset)} />
+                {getAssetType(relatedAsset.name) === 'audio' && (
+                  <audio
+                    controls
+                    id="audio"
+                    onMouseEnter={(e) => e.currentTarget.play()}
+                    onMouseLeave={(e) => e.currentTarget.pause()}
+                    src={URL.createObjectURL(relatedAsset)}
+                  />
+                )}
+                {getAssetType(relatedAsset.name) === 'video' && (
+                  <video
+                    controls
+                    id="video"
+                    onMouseEnter={(e) => e.currentTarget.play()}
+                    onMouseLeave={(e) => e.currentTarget.pause()}
+                    src={URL.createObjectURL(relatedAsset)}
+                  />
+                )}
+                {getAssetType(relatedAsset.name) === 'image' && (
+                  <img alt="preview" src={URL.createObjectURL(relatedAsset)} />
+                )}
               </div>
             )}
           </div>

components/MetadataModal.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 import { useMetadataAttributesState } from 'components/forms/MetadataAttributes.hooks'
@@ -11,7 +12,7 @@ import { MetadataAttributes } from './forms/MetadataAttributes'
 import { MetadataFormGroup } from './MetadataFormGroup'
 
 export interface MetadataModalProps {
-  imageFile: File
+  assetFile: File
   metadataFile: File
   updateMetadata: (metadataFile: File) => void
   updatedMetadataFile: File
@@ -114,8 +115,8 @@ export const MetadataModal = (props: MetadataModalProps) => {
           htmlFor="temp"
         >
           <MetadataFormGroup
-            relatedAsset={props.imageFile}
+            relatedAsset={props.assetFile}
-            subtitle={`Asset name: ${props.imageFile?.name}`}
+            subtitle={`Asset filename: ${props.assetFile?.name}`}
             title="Update Metadata"
           >
             <TextInput {...nameState} onChange={(e) => nameState.onChange(e.target.value)} />

pages/collections/upload.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
+
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable func-names */
 
@@ -13,19 +14,21 @@ import { setBaseTokenUri, setImage, useCollectionStore } from 'contexts/collecti
 import type { NextPage } from 'next'
 import { NextSeo } from 'next-seo'
 import type { ChangeEvent } from 'react'
-import { useRef, useState } from 'react'
+import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'react-hot-toast'
 import type { UploadServiceType } from 'services/upload'
 import { upload } from 'services/upload'
 import { withMetadata } from 'utils/layout'
 import { links } from 'utils/links'
 import { naturalCompare } from 'utils/sort'
 
+import { getAssetType } from '../../utils/getAssetType'
+
 type UploadMethod = 'new' | 'existing'
 
 const UploadPage: NextPage = () => {
   const baseTokenURI = useCollectionStore().base_token_uri
-  const [imageFilesArray, setImageFilesArray] = useState<File[]>([])
+  const [assetFilesArray, setAssetFilesArray] = useState<File[]>([])
   const [metadataFilesArray, setMetadataFilesArray] = useState<File[]>([])
   const [updatedMetadataFilesArray, setUpdatedMetadataFilesArray] = useState<File[]>([])
   const [uploadMethod, setUploadMethod] = useState<UploadMethod>('new')
@@ -39,8 +42,6 @@ const UploadPage: NextPage = () => {
   const [pinataSecretKey, setPinataSecretKey] = useState(
     '9d6f42dc01eaab15f52eac8f36cc4f0ee4184944cb3cdbcda229d06ecf877ee7',
   )
-  const imageFilesRef = useRef<HTMLInputElement>(null)
-  const metadataFilesRef = useRef<HTMLInputElement>(null)
 
   const handleChangeBaseTokenUri = (event: { target: { value: React.SetStateAction<string> } }) => {
     setBaseTokenUri(event.target.value.toString())
@@ -50,8 +51,8 @@ const UploadPage: NextPage = () => {
     setImage(event.target.value.toString())
   }
 
-  const selectImages = (event: ChangeEvent<HTMLInputElement>) => {
+  const selectAssets = (event: ChangeEvent<HTMLInputElement>) => {
-    setImageFilesArray([])
+    setAssetFilesArray([])
     console.log(event.target.files)
     let reader: FileReader
     if (event.target.files === null) return
@@ -60,13 +61,13 @@ 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 imageFile = new File([e.target.result], event.target.files[i].name, { type: 'image/jpg' })
+        const assetFile = new File([e.target.result], event.target.files[i].name, { type: 'image/jpg' })
-        setImageFilesArray((prev) => [...prev, imageFile])
+        setAssetFilesArray((prev) => [...prev, assetFile])
       }
       if (!event.target.files) return toast.error('No file selected.')
       reader.readAsArrayBuffer(event.target.files[i])
       reader.onloadend = function (e) {
-        setImageFilesArray((prev) => prev.sort((a, b) => naturalCompare(a.name, b.name)))
+        setAssetFilesArray((prev) => prev.sort((a, b) => naturalCompare(a.name, b.name)))
       }
     }
   }
@@ -74,7 +75,7 @@ const UploadPage: NextPage = () => {
   const selectMetadata = (event: ChangeEvent<HTMLInputElement>) => {
     setMetadataFilesArray([])
     setUpdatedMetadataFilesArray([])
-    console.log(imageFilesArray)
+    console.log(assetFilesArray)
     console.log(event.target.files)
     let reader: FileReader
     if (event.target.files === null) return toast.error('No files selected.')
@@ -99,31 +100,31 @@ 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('.')))
+    const assetFileNames = assetFilesArray.map((file) => file.name.substring(0, file.name.lastIndexOf('.')))
-    console.log(imageFileNames)
+    console.log(assetFileNames)
     //compare the two arrays to make sure they are the same
-    const areArraysEqual = metadataFileNames.every((val, index) => val === imageFileNames[index])
+    const areArraysEqual = metadataFileNames.every((val, index) => val === assetFileNames[index])
     if (!areArraysEqual) {
       return toast.error('Asset and metadata file names do not match.')
     }
 
-    console.log(imageFilesArray)
+    console.log(assetFilesArray)
-    const imageURI = await upload(
+    const assetURI = await upload(
-      imageFilesArray,
+      assetFilesArray,
       uploadService,
-      'images',
+      'assets',
       nftStorageApiKey,
       pinataApiKey,
       pinataSecretKey,
     )
-    console.log(imageURI)
+    console.log(assetURI)
     setUpdatedMetadataFilesArray([])
     let reader: FileReader
     for (let i = 0; i < metadataFilesArray.length; i++) {
       reader = new FileReader()
       reader.onload = function (e) {
         const metadataJSON = JSON.parse(e.target?.result as string)
-        metadataJSON.image = `ipfs://${imageURI}/${imageFilesArray[i].name}`
+        metadataJSON.image = `ipfs://${assetURI}/${assetFilesArray[i].name}`
         const metadataFileBlob = new Blob([JSON.stringify(metadataJSON)], {
           type: 'application/json',
         })
@@ -342,9 +343,9 @@ const UploadPage: NextPage = () => {
                 <div>
                   <label
                     className="block mt-5 mr-1 mb-1 ml-8 w-full font-bold text-white dark:text-gray-300"
-                    htmlFor="imageFiles"
+                    htmlFor="assetFiles"
                   >
-                    Image File Selection
+                    Asset Selection
                   </label>
                   <div
                     className={clsx(
@@ -353,21 +354,20 @@ const UploadPage: NextPage = () => {
                     )}
                   >
                     <input
-                      accept="image/*"
+                      accept="image/*, audio/*, video/*"
                       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="imageFiles"
+                      id="assetFiles"
                       multiple
-                      onChange={selectImages}
+                      onChange={selectAssets}
-                      ref={imageFilesRef}
                       type="file"
                     />
                   </div>
                 </div>
 
-                {imageFilesArray.length > 0 && (
+                {assetFilesArray.length > 0 && (
                   <div>
                     <label
                       className="block mt-5 mr-1 mb-1 ml-8 w-full font-bold text-white dark:text-gray-300"
@@ -390,7 +390,6 @@ const UploadPage: NextPage = () => {
                         id="metadataFiles"
                         multiple
                         onChange={selectMetadata}
-                        ref={metadataFilesRef}
                         type="file"
                       />
                     </div>
@@ -398,9 +397,9 @@ const UploadPage: NextPage = () => {
                 )}
                 <Conditional
                   test={
-                    imageFilesArray.length > 0 &&
+                    assetFilesArray.length > 0 &&
                     metadataFilesArray.length > 0 &&
-                    imageFilesArray.length !== metadataFilesArray.length
+                    assetFilesArray.length !== metadataFilesArray.length
                   }
                 >
                   <Alert className="mt-4 ml-8 w-3/4" type="warning">
@@ -411,7 +410,7 @@ const UploadPage: NextPage = () => {
                 <div className="mt-5 ml-8">
                   <Button
                     className="mb-8 w-[120px]"
-                    isDisabled={imageFilesArray.length === 0 || imageFilesArray.length !== metadataFilesArray.length}
+                    isDisabled={assetFilesArray.length === 0 || assetFilesArray.length !== metadataFilesArray.length}
                     isWide
                     onClick={updateMetadata}
                     variant="solid"
@@ -420,19 +419,19 @@ const UploadPage: NextPage = () => {
                   </Button>
                 </div>
                 <MetadataModal
-                  imageFile={imageFilesArray[metadataFileArrayIndex]}
+                  assetFile={assetFilesArray[metadataFileArrayIndex]}
                   metadataFile={metadataFilesArray[metadataFileArrayIndex]}
                   refresher={refreshMetadata}
                   updateMetadata={updateMetadataFileArray}
                   updatedMetadataFile={updatedMetadataFilesArray[metadataFileArrayIndex]}
                 />
               </div>
-              {imageFilesArray.length > 0 && (
+              {assetFilesArray.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.map((imageSource, index) => (
+                  {assetFilesArray.map((assetSource, 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}>
+                        <Conditional test={assetFilesArray.length > 4 * index}>
                           <button
                             key={4 * index}
                             className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
@@ -445,16 +444,41 @@ const UploadPage: NextPage = () => {
                               className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
                               htmlFor="my-modal-4"
                             >
-                              <img
+                              {getAssetType(assetFilesArray[4 * index]?.name) === 'audio' && (
-                                key={`image-${4 * index}`}
+                                <div className="flex relative flex-col items-center mt-2 ml-2">
-                                alt="asset"
+                                  <img
-                                className="px-1 my-1 thumbnail"
+                                    key={`audio-${4 * index}`}
-                                src={imageFilesArray[4 * index] ? URL.createObjectURL(imageFilesArray[4 * index]) : ''}
+                                    alt="audio_icon"
-                              />
+                                    className="relative mb-2 ml-1 w-6 h-6 thumbnail"
+                                    src="/audio.png"
+                                  />
+                                  <span className="relative self-center">{assetFilesArray[4 * index]?.name}</span>
+                                </div>
+                              )}
+                              {getAssetType(assetFilesArray[4 * index]?.name) === 'video' && (
+                                <video
+                                  id="video"
+                                  muted
+                                  onMouseEnter={(e) => e.currentTarget.play()}
+                                  onMouseLeave={(e) => e.currentTarget.pause()}
+                                  src={URL.createObjectURL(assetFilesArray[4 * index])}
+                                />
+                              )}
+
+                              {getAssetType(assetFilesArray[4 * index]?.name) === 'image' && (
+                                <img
+                                  key={`image-${4 * index}`}
+                                  alt="asset"
+                                  className="px-1 my-1 thumbnail"
+                                  src={
+                                    assetFilesArray[4 * index] ? URL.createObjectURL(assetFilesArray[4 * index]) : ''
+                                  }
+                                />
+                              )}
                             </label>
                           </button>
                         </Conditional>
-                        <Conditional test={imageFilesArray.length > 4 * index + 1}>
+                        <Conditional test={assetFilesArray.length > 4 * index + 1}>
                           <button
                             key={4 * index + 1}
                             className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
@@ -467,20 +491,43 @@ const UploadPage: NextPage = () => {
                               className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
                               htmlFor="my-modal-4"
                             >
-                              <img
+                              {getAssetType(assetFilesArray[4 * index + 1]?.name) === 'audio' && (
-                                key={`image-${4 * index + 1}`}
+                                <div className="flex relative flex-col items-center mt-2 ml-2">
-                                alt="asset"
+                                  <img
-                                className="px-1 my-1 thumbnail"
+                                    key={`audio-${4 * index + 1}`}
-                                src={
+                                    alt="audio_icon"
-                                  imageFilesArray[4 * index + 1]
+                                    className="relative mb-2 ml-1 w-6 h-6 thumbnail"
-                                    ? URL.createObjectURL(imageFilesArray[4 * index + 1])
+                                    src="/audio.png"
-                                    : ''
+                                  />
-                                }
+                                  <span className="relative self-center">{assetFilesArray[4 * index + 1]?.name}</span>
-                              />
+                                </div>
+                              )}
+                              {getAssetType(assetFilesArray[4 * index + 1]?.name) === 'video' && (
+                                <video
+                                  id="video"
+                                  muted
+                                  onMouseEnter={(e) => e.currentTarget.play()}
+                                  onMouseLeave={(e) => e.currentTarget.pause()}
+                                  src={URL.createObjectURL(assetFilesArray[4 * index + 1])}
+                                />
+                              )}
+
+                              {getAssetType(assetFilesArray[4 * index + 1]?.name) === 'image' && (
+                                <img
+                                  key={`image-${4 * index + 1}`}
+                                  alt="asset"
+                                  className="px-1 my-1 thumbnail"
+                                  src={
+                                    assetFilesArray[4 * index + 1]
+                                      ? URL.createObjectURL(assetFilesArray[4 * index + 1])
+                                      : ''
+                                  }
+                                />
+                              )}
                             </label>
                           </button>
                         </Conditional>
-                        <Conditional test={imageFilesArray.length > 4 * index + 2}>
+                        <Conditional test={assetFilesArray.length > 4 * index + 2}>
                           <button
                             key={4 * index + 2}
                             className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
@@ -493,20 +540,43 @@ const UploadPage: NextPage = () => {
                               className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
                               htmlFor="my-modal-4"
                             >
-                              <img
+                              {getAssetType(assetFilesArray[4 * index + 2]?.name) === 'audio' && (
-                                key={`image-${4 * index + 2}`}
+                                <div className="flex relative flex-col items-center mt-2 ml-2">
-                                alt="asset"
+                                  <img
-                                className="px-1 my-1 thumbnail"
+                                    key={`audio-${4 * index + 2}`}
-                                src={
+                                    alt="audio_icon"
-                                  imageFilesArray[4 * index + 2]
+                                    className="relative mb-2 ml-1 w-6 h-6 thumbnail"
-                                    ? URL.createObjectURL(imageFilesArray[4 * index + 2])
+                                    src="/audio.png"
-                                    : ''
+                                  />
-                                }
+                                  <span className="relative self-center">{assetFilesArray[4 * index + 2]?.name}</span>
-                              />
+                                </div>
+                              )}
+                              {getAssetType(assetFilesArray[4 * index + 2]?.name) === 'video' && (
+                                <video
+                                  id="video"
+                                  muted
+                                  onMouseEnter={(e) => e.currentTarget.play()}
+                                  onMouseLeave={(e) => e.currentTarget.pause()}
+                                  src={URL.createObjectURL(assetFilesArray[4 * index + 2])}
+                                />
+                              )}
+
+                              {getAssetType(assetFilesArray[4 * index + 2]?.name) === 'image' && (
+                                <img
+                                  key={`image-${4 * index + 2}`}
+                                  alt="asset"
+                                  className="px-1 my-1 thumbnail"
+                                  src={
+                                    assetFilesArray[4 * index + 2]
+                                      ? URL.createObjectURL(assetFilesArray[4 * index + 2])
+                                      : ''
+                                  }
+                                />
+                              )}
                             </label>
                           </button>
                         </Conditional>
-                        <Conditional test={imageFilesArray.length > 4 * index + 3}>
+                        <Conditional test={assetFilesArray.length > 4 * index + 3}>
                           <button
                             key={4 * index + 3}
                             className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
@@ -519,16 +589,39 @@ const UploadPage: NextPage = () => {
                               className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
                               htmlFor="my-modal-4"
                             >
-                              <img
+                              {getAssetType(assetFilesArray[4 * index + 3]?.name) === 'audio' && (
-                                key={`image-${4 * index + 3}`}
+                                <div className="flex relative flex-col items-center mt-2 ml-2">
-                                alt={' '}
+                                  <img
-                                className="px-1 my-1 thumbnail"
+                                    key={`audio-${4 * index + 3}`}
-                                src={
+                                    alt="audio_icon"
-                                  imageFilesArray[4 * index + 3]
+                                    className="relative mb-2 ml-1 w-6 h-6 thumbnail"
-                                    ? URL.createObjectURL(imageFilesArray[4 * index + 3])
+                                    src="/audio.png"
-                                    : ''
+                                  />
-                                }
+                                  <span className="relative self-center">{assetFilesArray[4 * index + 3]?.name}</span>
-                              />
+                                </div>
+                              )}
+                              {getAssetType(assetFilesArray[4 * index + 3]?.name) === 'video' && (
+                                <video
+                                  id="video"
+                                  muted
+                                  onMouseEnter={(e) => e.currentTarget.play()}
+                                  onMouseLeave={(e) => e.currentTarget.pause()}
+                                  src={URL.createObjectURL(assetFilesArray[4 * index + 3])}
+                                />
+                              )}
+
+                              {getAssetType(assetFilesArray[4 * index + 3]?.name) === 'image' && (
+                                <img
+                                  key={`image-${4 * index + 3}`}
+                                  alt="asset"
+                                  className="px-1 my-1 thumbnail"
+                                  src={
+                                    assetFilesArray[4 * index + 3]
+                                      ? URL.createObjectURL(assetFilesArray[4 * index + 3])
+                                      : ''
+                                  }
+                                />
+                              )}
                             </label>
                           </button>
                         </Conditional>

services/upload/pinata.ts

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

utils/getAssetType.ts

@@ -0,0 +1,11 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
+export type AssetType = 'image' | 'audio' | 'video' | 'unknown'
+
+export const getAssetType = (assetFileName: string): AssetType => {
+  const assetType = assetFileName?.split('.').pop() || 'unknown'
+  if (assetType === 'png' || assetType === 'jpg' || assetType === 'jpeg') return 'image'
+  if (assetType === 'mp3' || assetType === 'wav') return 'audio'
+  if (assetType === 'mp4') return 'video'
+  return 'unknown'
+}