Slow progress updates when uploading to Storage via uploadBytesResumable

[Luzzifus]

Operating System

Windows 11

Browser Version

Chromium 114

Firebase SDK Version

9.22.2

Firebase SDK Product:

Storage

Describe your project's tooling

node.js script running with ts-node

Describe the problem

When uploading a file to storage via uploadBytesResumable from the Web modular API, I noticed that the progress updates from the state_changed event come in larger steps. At first updates come in quickly, but as the upload goes on, they come in larger and larger chunks. This makes the progress look like it's on halt or doesn't progress at all for larger files.

I would expect the updates to come in continuously and in approximately the same intervals throughout the whole upload process.

I found one (old) discussion regarding this, after which this problem was presumably fixed in version 3.7.5 a very long time ago already:
https://groups.google.com/g/firebase-talk/c/YcT8PT4oMSQ

But at least for me, it is indeed not fixed.

Steps and code to reproduce issue

The code I use to upload files:

import { initializeApp } from 'firebase/app';
import { FirebaseStorage, getStorage, ref, uploadBytesResumable } from 'firebase/storage';
import ProgressBar from 'progress';

const app = initializeApp(firebaseConfig);
const storage = getStorage(app);

const uploadPackages = async (storage: FirebaseStorage, id: string, packages: string[]) => {
  console.log(`Uploading ${packages.length} package(s)...`);

  packages.forEach(async (packageFilePath) => {
    const fileName = path.basename(packageFilePath);
    const filePath = path.join(process.cwd(), packageFilePath);

    const localFileContent = readFileSync(filePath);
    const storageRef = ref(storage, `some_folder/${id}/${fileName}`);

    await new Promise<void>((resolve, reject) => {
      const uploadTask = uploadBytesResumable(storageRef, localFileContent);
      const progressBar = new ProgressBar(`${fileName} [:bar] :percent :etas`, {
        complete: '=',
        incomplete: ' ',
        width: 20,
        total: 0,
      });

      uploadTask.on('state_changed',
        ({ bytesTransferred, totalBytes }) => {
          progressBar.total = totalBytes;
          progressBar.update(bytesTransferred / totalBytes);
        },
        reject,
        resolve
      );
    })
  });
};

[jbalidiong]

Hi @Luzzifus, thanks for bringing this to our attention. I was able to replicate the behavior. Let me check what we can do for this issue or bring someone here that can provide more context about it. I’ll update this thread if I have any information to share.