Fixes to other forms and add preview to upload page of icon marketplace

src/app/game/berry-dash/icon-marketplace/upload/page.tsx

@@ -14,6 +14,11 @@ export default function BerryDashSubmitIcon () {
   const [loading, setLoading] = useState<boolean>(true)
   const router = useRouter()
 
+  const [name, setName] = useState<string>('')
+  const [price, setPrice] = useState<number>(10)
+  const [file, setFile] = useState<File | undefined>(undefined)
+  const [preview, setPreview] = useState<string | null>(null)
+
   useEffect(() => {
     document.title = 'Lncvrt Games - Berry Dash Icon Submition'
 
@@ -54,12 +59,6 @@ export default function BerryDashSubmitIcon () {
               onSubmit={async e => {
                 e.preventDefault()
 
-                const form = e.currentTarget
-                const formData = new FormData(form)
-                const text = formData.get('name') as string
-                const price = formData.get('price') as string
-                const file = formData.get('bird') as File
-
                 if (!file) {
                   alert('Please select a bird image!')
                   return
@@ -80,7 +79,7 @@ export default function BerryDashSubmitIcon () {
                       {
                         token,
                         fileContent: base64Data,
-                        name: text,
+                        name,
                         price
                       },
                       {
@@ -120,8 +119,21 @@ export default function BerryDashSubmitIcon () {
                 name='bird'
                 type='file'
                 accept='image/png'
-                required
                 className='cursor-pointer'
+                onChange={e => {
+                  const f = e.target.files?.[0]
+                  if (!f) return
+                  if (f.type !== 'image/png') {
+                    alert('Please select a PNG file!')
+                    return
+                  }
+                  setFile(f)
+
+                  const reader = new FileReader()
+                  reader.onload = () => setPreview(reader.result as string)
+                  reader.readAsDataURL(f)
+                }}
+                required
               />
               <input
                 id='name'
@@ -129,6 +141,9 @@ export default function BerryDashSubmitIcon () {
                 placeholder='Bird Name'
                 type='text'
                 autoComplete='off'
+                maxLength={16}
+                value={name}
+                onChange={e => setName(e.target.value)}
                 required
               />
               <input
@@ -138,9 +153,33 @@ export default function BerryDashSubmitIcon () {
                 type='number'
                 autoComplete='off'
                 min={10}
+                value={price}
+                onChange={e => setPrice(Number(e.target.value))}
                 required
               />
               <button type='submit'>Upload!</button>
+              <div className='mt-4'>
+                <p className='text-center mb-1 text-xl'>Preview:</p>
+                <div className='sub-box2 text-center'>
+                  <div className='bg-(--col8) rounded-md w-fit h-fit p-2 mx-auto'>
+                    <img
+                      src={preview ?? undefined}
+                      width={96}
+                      height={96}
+                      draggable={false}
+                      className='pointer-events-none'
+                    />
+                  </div>
+                  <p>
+                    Bird Name:{' '}
+                    {!/^[a-zA-Z0-9 ]+$/.test(name) || name.length > 16
+                      ? 'N/A'
+                      : name}
+                  </p>
+                  <p>Price: {price}</p>
+                  <p>Designer Name: {getCookie('accountUsername', '-1')}</p>
+                </div>
+              </div>
             </form>
           ) : (
             (result == 1 || result == 2) && (

src/app/game/berry-dash/splash/page.tsx

@@ -4,7 +4,6 @@ import { BackButton } from '@/app/components/BackButton'
 import { ReloadButton } from '@/app/components/ReloadButton'
 import { UploadButton } from '@/app/components/UploadButton'
 import axios from 'axios'
-import Link from 'next/link'
 import { useEffect, useState } from 'react'
 
 export default function BerryDashSplash () {

src/app/game/berry-dash/splash/submit/page.tsx

@@ -14,6 +14,8 @@ export default function BerryDashSubmitSplash () {
   const [loading, setLoading] = useState<boolean>(true)
   const router = useRouter()
 
+  const [text, setText] = useState<string>('')
+
   useEffect(() => {
     document.title = 'Lncvrt Games - Berry Dash Splash Text Submition'
 
@@ -52,10 +54,6 @@ export default function BerryDashSubmitSplash () {
               onSubmit={async e => {
                 e.preventDefault()
 
-                const form = e.currentTarget
-                const formData = new FormData(form)
-                const text = formData.get('text') as string
-
                 try {
                   const result = await axios.post(
                     '/api/berrydash/splash-text',
@@ -100,8 +98,10 @@ export default function BerryDashSubmitSplash () {
                 placeholder='Text'
                 type='text'
                 className='text-center w-120'
-                required
                 autoComplete='off'
+                value={text}
+                onChange={e => setText(e.target.value)}
+                required
               />
               <button type='submit'>Submit</button>
             </form>