fix: different validation rules for the cover file

src/components/form/FormFields.jsx

@@ -4,7 +4,10 @@ import Select from '@atoms/select/Base'
 import styles from '@style'
 import { memo } from 'react'
 import { Upload } from '@components/upload/index'
-import { ALLOWED_FILETYPES_LABEL } from '@constants'
+import {
+  ALLOWED_FILETYPES_LABEL,
+  ALLOWED_COVER_FILETYPES_LABEL,
+} from '@constants'
 import { Controller } from 'react-hook-form'
 import classNames from 'classnames'
 
@@ -113,6 +116,31 @@ export const FormFields = ({ value, field, error, register, control }) => {
           )}
         />
       )
+
+    case 'cover-file':
+      return (
+        <Controller
+          control={control}
+          defaultValue={field.defaultValue}
+          name={name}
+          rules={field.rules}
+          render={({ field: { onChange, value, name, ref } }) => (
+            <Upload
+              ref={ref}
+              name={name}
+              file={value?.file}
+              label={field.label}
+              placeHolder={value ? value?.file?.name : field.placeHolder}
+              className={styles.field}
+              onChange={onChange}
+              allowedTypesLabel={ALLOWED_COVER_FILETYPES_LABEL}
+            >
+              {error && <FieldError error={error.message} />}
+            </Upload>
+          )}
+        />
+      )
+
     default:
       return (
         <p>

src/constants.ts

@@ -105,7 +105,7 @@ export const ALLOWED_COVER_MIMETYPES = [
   MIMETYPE.MP4,
 ]
 
-export const ALLOWED_COVER_FILETYPES_LABEL = ['jpeg, png, gif']
+export const ALLOWED_COVER_FILETYPES_LABEL = 'jpeg, png, gif, mp4'
 export const MAX_EDITIONS = 10000 // Limited by contract
 export const MIN_ROYALTIES = 10
 export const MAX_ROYALTIES = 25

src/context/mintStore.ts

@@ -9,6 +9,8 @@ import { useModalStore } from './modalStore'
 import {
   ALLOWED_FILETYPES_LABEL,
   ALLOWED_MIMETYPES,
+  ALLOWED_COVER_FILETYPES_LABEL,
+  ALLOWED_COVER_MIMETYPES,
   METADATA_ACCESSIBILITY_HAZARDS_PHOTOSENS,
   METADATA_CONTENT_RATING_MATURE,
   MIMETYPE,
@@ -128,6 +130,14 @@ export const useMintStore = create<MintState>()(
             return
           }
 
+          // check cover mime type
+          if (cover && !ALLOWED_COVER_MIMETYPES.includes(cover.mimeType)) {
+            show(
+              `Cover file format invalid. supported formats include: ${ALLOWED_COVER_FILETYPES_LABEL.toLocaleLowerCase()}`
+            )
+            return
+          }
+
           // check file size
           const filesize = parseInt(
             (artifact.file.size / 1024 / 1024).toFixed(4)

src/pages/mint/fields.js

@@ -148,7 +148,7 @@ export const fields = [
     label: 'Cover Image',
     placeHolder: 'Upload Cover image',
     name: 'cover',
-    type: 'file',
+    type: 'cover-file',
     watch: true,
     enable_if: 'needsCover',
     rules: {