firebase / firebase/firebase-js-sdk
Slow progress updates when uploading to Storage via uploadBytesResumable
- 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
Assessment
This issue has not been assessed yet.