feat(download): add media url

src/components/ModForm.tsx

@@ -457,12 +457,14 @@ export const ModForm = () => {
           <Fragment key={`download-${index}`}>
             <DownloadUrlFields
               index={index}
+              title={download.title}
               url={download.url}
               hash={download.hash}
               signatureKey={download.signatureKey}
               malwareScanLink={download.malwareScanLink}
               modVersion={download.modVersion}
               customNote={download.customNote}
+              mediaUrl={download.mediaUrl}
               onUrlChange={handleDownloadUrlChange}
               onRemove={removeDownloadUrl}
             />
@@ -530,6 +532,7 @@ type DownloadUrlFieldsProps = {
   malwareScanLink: string
   modVersion: string
   customNote: string
+  mediaUrl?: string
   onUrlChange: (index: number, field: keyof DownloadUrl, value: string) => void
   onRemove: (index: number) => void
 }
@@ -544,6 +547,7 @@ const DownloadUrlFields = React.memo(
     malwareScanLink,
     modVersion,
     customNote,
+    mediaUrl,
     onUrlChange,
     onRemove
   }: DownloadUrlFieldsProps) => {
@@ -713,6 +717,40 @@ const DownloadUrlFields = React.memo(
           />
           <div className='inputWrapperMainBox'></div>
         </div>
+        <div className='inputWrapperMain'>
+          <div className='inputWrapperMainBox'>
+            <svg
+              xmlns='http://www.w3.org/2000/svg'
+              viewBox='-96 0 512 512'
+              width='1em'
+              height='1em'
+              fill='currentColor'
+            >
+              <path d='M320 448c0 17.67-14.31 32-32 32H64c-17.69 0-32-14.33-32-32v-384C32 46.34 46.31 32.01 64 32.01S96 46.34 96 64.01v352h192C305.7 416 320 430.3 320 448z'></path>
+            </svg>
+          </div>
+          <div
+            style={{
+              width: '100%'
+            }}
+          >
+            <ImageUpload
+              onChange={(values) => {
+                onUrlChange(index, 'mediaUrl', values[0])
+              }}
+            />
+
+            <input
+              type='text'
+              className='inputMain'
+              placeholder='Media URL'
+              name='mediaUrl'
+              value={mediaUrl}
+              onChange={handleChange}
+            />
+          </div>
+          <div className='inputWrapperMainBox'></div>
+        </div>
       </div>
     )
   }

src/pages/mod/index.tsx

@@ -573,7 +573,8 @@ const Download = ({
   signatureKey,
   malwareScanLink,
   modVersion,
-  customNote
+  customNote,
+  mediaUrl
 }: DownloadUrl) => {
   const [showAuthDetails, setShowAuthDetails] = useState(false)
   const [showNotice, setShowNotice] = useState(false)

src/pages/submitMod/action.ts

@@ -256,6 +256,19 @@ const validateState = async (
 
         errors.downloadUrls![i] = 'Download url must be valid and reachable'
       }
+
+      if (
+        downloadUrl.mediaUrl &&
+        downloadUrl.mediaUrl.trim() !== '' &&
+        (!isValidUrl(downloadUrl.mediaUrl) ||
+          !isValidImageUrl(downloadUrl.mediaUrl) ||
+          !(await isReachable(downloadUrl.mediaUrl)))
+      ) {
+        if (!errors.downloadUrls)
+          errors.downloadUrls = Array(formState.downloadUrls.length)
+
+        errors.downloadUrls![i] = 'Media URLs must be valid and reachable image'
+      }
     }
   }
 

src/types/mod.ts

@@ -47,6 +47,7 @@ export interface DownloadUrl {
   malwareScanLink: string
   modVersion: string
   customNote: string
+  mediaUrl?: string
 }
 
 export interface ModDetails extends Omit<ModFormState, 'tags'> {