I am using Firebase Storage for saving images and I use its Task which reports me upload progress of the file. I have found a function to the task which updates progress into component state like below:
const [fileUploadQueue, setFileUploadQueue] = useState([]);
// This event listener is invoked each time a progress is reported by file uploading tasks. This can be multiple times in 1 second.
const fileUploadProgressListener = (progress) => {
console.log('queue', fileUploadQueue) // prints [] every updated event
setFileUploadQueue((oldQueue) => {
var newQueue = [...oldQueue];
var index = newQueue.indexOf(x => x.name === progress.name);
if (index > 0) {
if (progress.status === 'completed') {
console.log('completed', progress.name);
newQueue.splice(index, 1);
} else {
console.log('in progress', progress.name);
newQueue[index] = progress;
}
} else {
console.log('adding file', progress.name);
newQueue.push(progress);
}
return newQueue;
});
}
The problem is it never reaches 'in progress' or 'completed stage', it keeps printing 'adding file' and console.log of oldQueue shows an empty array. So my question is why setFileUploadQueue is not working for each progress event?
OUTPUT:
LOG adding file document-654946
LOG adding file document-654946
LOG adding file document-654946
LOG adding file document-654946
LOG adding file document-654946
LOG adding file document-654946
EDIT:
The problem is related to this: console log the state after using useState doesn't return the current value and I am not able to find a solution for this.
