firebase / firebase/firebase-js-sdk

Slow progress updates when uploading to Storage via uploadBytesResumable

Open
#7,366 1 comment 0 reactions 0 assignees View on GitHub
api: storage needs-attention question v9
Dominant language
TypeScript
Stars
5.1k
Forks
1k
Avg merge
2d 21h
Merged PRs (30d)
37

Description

### 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((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
);
})
});
};
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.