XMLHttpRequest and fetch Limiting file upload size to 100mb

Question

So I'm working on a simple project, it's a basic file upload system. Everything is working and running fine when I test the project locally, but whenever I run this program on my server, the file upload stops working at 100mb. It isn't speed, because at 99mb it uploaded in about 20 seconds. I only get 1 progress update when logging with the following function:

xhr.upload.addEventListener("progress", (e) => {
                const progress = Math.floor(e.loaded/e.total*100)
                progressBar.style.width = progress + "%"
                progressBar.innerHTML = progress+"%"
                console.log(e.loaded/e.total*100)
            }, false)

When with a 99mb file, I get them almost every second. Again, all of this works fine on localhost with no issues, it is just on my server. I am wondering if there is some sort of client or server issue preventing this? I want to allow larger files. Thanks!

client code:

<form id="uploadForm">
    <div class="card" style="width: 50vw;">
        <div class="input-group mb-3">
            <button id="upload" disabled class="btn btn-success">Upload</button>
            <input type="file" name="file" id="file" class="form-control">
        </div>
        <div class="progress">
            <div class="progress-bar" id="progress" role="progressbar" style="width: 0%">0%</div>
        </div>  
    </div>
</form>
<script>
    const fileInput = document.getElementById("file")
    const uploadButton = document.getElementById("upload")
    const progressBar = document.getElementById("progress")

    uploadButton.onclick = () => {
        uploadFile(fileInput.files[0])
    }

    function uploadFile(file) {
        console.log(file)
        const xhr = new XMLHttpRequest()
        if (xhr.upload) {
            const formdata = new FormData()
            uploadButton.disabled = true
            xhr.upload.addEventListener("progress", (e) => {
                const progress = Math.floor(e.loaded/e.total*100)
                progressBar.style.width = progress + "%"
                progressBar.innerHTML = progress+"%"
                console.log(e.loaded/e.total*100)
            }, false)
            xhr.onreadystatechange = (e) => {
                if (xhr.readyState == 4) {
                    const response = JSON.parse(xhr.response)
                    window.location.pathname = response.path
                }
            }
            formdata.append("file", file)
            xhr.open("POST", "/upload", true)
            xhr.setRequestHeader("X-FILENAME", file.name)
            xhr.send(formdata)
        }
    }
    
    fileInput.onchange = event => {
        uploadButton.disabled = fileInput.value ? false : true
    }
</script>

server code: using express and express-fileupload on npm removed a lot of the unneeded stuff

import express from "express"
import fileUpload, { UploadedFile } from "express-fileupload"

const app = express()
app.use(fileUpload({
    limits: {
        files: 1
    }
}))
app.post("/upload", (req, res) => {
    const file = req.files.file as UploadedFile
    const key = crypto.randomBytes(8).toString("hex")
    fs.mkdirSync(path.join("./uploads", key))
    file.mv(path.join("./uploads", key, file.name))
    res.json({
        file: file.name,
        path: `/uploads/${key}/${file.name}`
    })
})