Huge memory consumption on javascript chunked file upload (supposed to be memory efficient)

I want to upload large files to a server (several GB). I take the files, chunk them into 100MB pieces and upload these chunks.

I was hoping, this would be very memory efficient, because I never load the whole file. However both on Chrome and on Firefox the RAM fills up until the size of the file.

My application is more complex, but this stand alone example can reproduce this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<form id="files">
    <input type="file" multiple id="file-input">
    <input type="submit">
</form>
<script>

    const form = document.getElementById('files');

    form.addEventListener('submit', async (e) => {
        e.preventDefault();
        const input = document.getElementById('file-input');

        for (let file of input.files) {

            const chunkSize = 100 * 1024 *1024;
            let start = 0;

            const nChunks = Math.ceil(file.size / chunkSize);
            for (let i=0;i < nChunks; i++) {

                let xhr = new XMLHttpRequest();

                xhr.onreadystatechange = function(e) {
                    if ( 4 === this.readyState ) {
                        console.log([`${i} xhr upload complete`, e]);
                    }
                };

                const slice = await file.slice(start, start + chunkSize).arrayBuffer();

                start += chunkSize;

                xhr.open('POST', '/test_memory');
                xhr.send(slice);
            }
        }
    })

</script>
</body>
</html>

Why wouldn't the browser or the garbage collector be able to free the memory up again?

If I click on the manual garbage collection after the download in the Chrome DevTools, the memory is released. But never before or automatically.