Axio post request Issues

I'm working on a Next.js application where I need to upload large files to a Cloudflare R2 bucket. I'm having some trouble implementing this functionality with axios. and have an error on every request. Can anyone provide guidance on the best approach for uploading large files efficiently using Next.js API routes and Cloudflare R2?

 const handleSubmit = async (e: any) => {        e.preventDefault()        const target = e.target        const image = target.image.files[0]        const video = target.video.files[0]        const bodyContent = new FormData()        bodyContent.append('title', target.title.value)        bodyContent.append('speaker', target.speaker.value)        bodyContent.append('descript', target.desc.value)        bodyContent.append('image', image)        bodyContent.append('video', video)        bodyContent.append('duration', duration.toString())        await axios.post('https://martial-server.godigital.workers.dev/videos', bodyContent, {            onUploadProgress: ({ loaded, total }) => {                setUpload(true)                setDisable(true)                if (total !== undefined) {                    setLoading((loaded / total) * 100)                }                if (loaded === total) {                    setComplet(true)                    setTimeout(() => {                        router.push('/videos')                    }, 2000)                }            }        }).catch(error => {            console.log(error)        })    }

and this is the error message

{"message": "Network Error","name": "AxiosError","stack": "AxiosError: Network Error\n    at XMLHttpRequest.handleError (webpack-internal:///(app-pages-browser)/./node_modules/axios/lib/adapters/xhr.js:176:14)\n    at Axios.request (webpack-internal:///(app-pages-browser)/./node_modules/axios/lib/core/Axios.js:54:41)","config": {"transitional": {"silentJSONParsing": true,"forcedJSONParsing": true,"clarifyTimeoutError": false        },"adapter": ["xhr","http"        ],"transformRequest": [            null        ],"transformResponse": [            null        ],"timeout": 0,"xsrfCookieName": "XSRF-TOKEN","xsrfHeaderName": "X-XSRF-TOKEN","maxContentLength": -1,"maxBodyLength": -1,"env": {},"headers": {"Accept": "application/json, text/plain, */*"        },"method": "post","url": "https://martial-server.godigital.workers.dev/videos","data": {}    },"code": "ERR_NETWORK","status": null}

How can i solve it?

I'm attempting to use an API route to handle the upload process. However, I'm encountering a message from Vercel (likely related to deployment limitations) regarding the size of the files.