How to upload a file and track it's progress on the client-side?

const uploadFile = async (thatFile) => {

        // Use a custom TransformStream to track upload progress
        const progressTrackingStream = new TransformStream({
            transform(chunk, controller) {
                controller.enqueue(chunk);
                bytesUploaded += chunk.byteLength;
                thatFile.uploaded += chunk.byteLength;
            },
            flush(controller) {
                console.log('completed stream');
            }
        });

        const response = await fetch("/api/upload", {
            method: "POST",
            headers: {
                "Content-Type": "application/octet-stream"
            },
            body: thatFile.file.stream().pipeThrough(progressTrackingStream),
            
        });

        const json = await response.json();
        console.log(json)
    };

const uploadFile = async (thatFile) => {

        // Use a custom TransformStream to track upload progress
        const progressTrackingStream = new TransformStream({
            transform(chunk, controller) {
                controller.enqueue(chunk);
                bytesUploaded += chunk.byteLength;
                thatFile.uploaded += chunk.byteLength;
            },
            flush(controller) {
                console.log('completed stream');
            }
        });

        const response = await fetch("/api/upload", {
            method: "POST",
            headers: {
                "Content-Type": "application/octet-stream"
            },
            body: thatFile.file.stream().pipeThrough(progressTrackingStream),
            
        });

        const json = await response.json();
        console.log(json)
    };