Как загрузить файлы во внешний API с помощью использования сервера с NextJS 14

В конце концов мне не удалось реализовать то, что я хотел, поэтому я решил создать дополнительный файл, в который поместил всю логику формы, а также запрос API.

'use client'
import { fetchurl, getAuthTokenOnServer } from '@/helpers/setTokenOnServer'
import { useState } from 'react'
import { toast } from 'react-toastify'
import Image from 'next/image'
import UseProgress from '@/components/global/useprogress'
import axios from 'axios'

const Form = ({ auth }) => {
  const [coverData, setCoverData] = useState({
    file: null,
    filename: `Choose file`,
    fileurl: `https://static.vecteezy.com/system/resources/previews/005/337/799/original/icon-image-not-found-free-vector.jpg`,
  })

  const { file, filename, fileurl } = coverData

  const [uploadPercentage, setUploadPercentage] = useState(0)
  const [error, setError] = useState(false)
  const [btnText, setBtnTxt] = useState('Submit')

  const upgradeAvatar = async (e) => {
    e.preventDefault()

    setBtnTxt('Submit...')
    const token = await getAuthTokenOnServer()
    const res = await axios.put(
      `http://localhost:5000/api/v1/uploads/uploadobject`,
      {
        userId: auth?.data?._id,
        username: auth?.data?.username,
        userEmail: auth?.data?.email,
        onModel: 'User',
        file: file,
        album: 'profile-covers',
      },
      {
        headers: {
          'Content-Type': 'multipart/form-data',
          Authorization: `Bearer ${token.value}`,
        },
        onUploadProgress: (ProgressEvent) => {
          setUploadPercentage(
            parseInt(
              Math.round(ProgressEvent.loaded * 100) / ProgressEvent.total
            )
          )
          setTimeout(() => setUploadPercentage(0), 10000)
        },
      }
    )
    await fetchurl(`/auth/updateavatar`, 'PUT', 'no-cache', {
      cover: res.data.data._id,
    })
  }

  const resetForm = () => {
    setCoverData({
      file: null,
      filename: `Choose file`,
      fileurl: `https://static.vecteezy.com/system/resources/previews/005/337/799/original/icon-image-not-found-free-vector.jpg`,
    })
  }

  return (
      <form onSubmit = {upgradeAvatar}>
        <label htmlFor = "cover" className = "form-label">
          File
        </label>
        <input
          id = "cover"
          name = "file"
          label = {file}
          onChange = {(e) => {
            const myFile = e.target.files[0]
            let preview = ''
            if (myFile instanceof Blob || myFile instanceof File) {
              preview = URL.createObjectURL(myFile)
            }
            setCoverData({
              file: myFile,
              filename: myFile.name,
              fileurl: preview,
            })
          }}
          type = "file"
          className = "form-control mb-3"
          placeholder = {fileurl}
          accept = {`image/*`}
        />
        <UseProgress percentage = {uploadPercentage} />
        <button type = "submit" className = "btn btn-secondary btn-sm float-start">
          {btnText}
        </button>
        <button
          type = "button"
          className = "btn btn-secondary btn-sm float-end"
          onClick = {resetForm}
        >
          Reset
        </button>
      </form>
  )
}

export default Form

а затем я просто вызвал компонент Form на страницу своего сервера.

import { fetchurl } from '@/helpers/setTokenOnServer'
import Form from './form'

async function getAuthenticatedUser() {
  const res = await fetchurl(`/auth/me`, 'GET', 'no-cache')
  return res
}

const UpdateAvatar = async ({ params, searchParams }) => {
  const auth = await getAuthenticatedUser()

  // Redirect if user is not logged in
  ;(auth?.error?.statusCode === 401 || !auth?.data?.isOnline) &&
    redirect(`/auth/login`)

  return <Form auth = {auth} />
}

export default UpdateAvatar