.jpg images are uploading with 0 KB while .webp are OK

'use client'

import { api } from '@/convex/_generated/api'
import { useMutation } from 'convex/react'
import { UploadButton, UploadFileResponse } from '@xixixao/uploadstuff/react'
import '@xixixao/uploadstuff/react/styles.css'
import { useSearchParams } from 'next/navigation'

export default function MediaForm() {
  const listingId = useSearchParams().get('listingId')
  const generateUploadUrl = useMutation(api.files.generateUploadUrl)
  const saveListingImages = useMutation(api.listings.saveListingImages)
  const saveAfterUpload = async (uploaded: UploadFileResponse[]) => {
    await saveListingImages({
      listingId,
      storageIds: uploaded.map(({ response }) => (response as any).storageId),
    })
  }
  console.log({ saveAfterUpload })

  return (
    <div className='max-w-20'>
      <UploadButton
        uploadUrl={generateUploadUrl}
        fileTypes={['.jpg', '.jpeg', '.png', '.gif', '.webp', 'image/*']}
        multiple
        onUploadComplete={saveAfterUpload}
        onUploadError={(error: unknown) => {
          // Do something with the error.
          alert(`ERROR! ${error}`)
        }}
      />
    </div>
  )
}

'use client'

import { api } from '@/convex/_generated/api'
import { useMutation } from 'convex/react'
import { UploadButton, UploadFileResponse } from '@xixixao/uploadstuff/react'
import '@xixixao/uploadstuff/react/styles.css'
import { useSearchParams } from 'next/navigation'

export default function MediaForm() {
  const listingId = useSearchParams().get('listingId')
  const generateUploadUrl = useMutation(api.files.generateUploadUrl)
  const saveListingImages = useMutation(api.listings.saveListingImages)
  const saveAfterUpload = async (uploaded: UploadFileResponse[]) => {
    await saveListingImages({
      listingId,
      storageIds: uploaded.map(({ response }) => (response as any).storageId),
    })
  }
  console.log({ saveAfterUpload })

  return (
    <div className='max-w-20'>
      <UploadButton
        uploadUrl={generateUploadUrl}
        fileTypes={['.jpg', '.jpeg', '.png', '.gif', '.webp', 'image/*']}
        multiple
        onUploadComplete={saveAfterUpload}
        onUploadError={(error: unknown) => {
          // Do something with the error.
          alert(`ERROR! ${error}`)
        }}
      />
    </div>
  )
}