Firebase-js-sdk: Firebase Storage UploadTask Snapshot does not progress and completion callback/promise is never returned.

[giladrom]

[REQUIRED] Describe your environment

• Operating System version: iOS13.4
• Browser version: Mobile Safari
• Firebase SDK version: 7.9.1
• Firebase Product: Storage

[REQUIRED] Describe the problem

Firebase Storage UploadTask Snapshot does not progress and completion callback/promise is never returned.

I can see the file is created and uploaded properly using Firebase Console.

Steps to reproduce:

Upload a file using the firebase storage sdk, wait for task snapshot to return.
Expected result: File is uploaded and progress is reported, and a download URL is returned (this worked until fairly recently, and I cannot determine exactly why this isn't working anymore)

Actual output:

console.log: Writing image to DB as image.jpeg...
console.log: Waiting for upload to finish...
console.log: running Upload Progress 0

<Nothing happens here and there's no timeout>

Relevant Code:

      const filename = "image.jpeg";
      console.log(`Writing image to DB as ${filename}...`);

      const uploadTask = firebase
        .storage()
        .ref()
        .child(filename)
        .put(blob, { contentType: "image/jpeg" });

      uploadTask.on(
        "state_changed",
        function(snap) {
          var progress = snap.bytesTransferred / snap.totalBytes / 100;
          console.log(snap.state, "Upload Progress", progress);
        },
        function(err) {
          console.error("Upload Error", err);
        }
      );

      console.log("Waiting for upload to finish...");

      await uploadTask.snapshot.ref
        .getDownloadURL()
        .then(url => {
          console.log("Upload Completed");

          resolve(url);
        })
        .catch(e => {
          reject(e);
        });

[Mytrill]

I can report that I have the exact same problem, here are my specs if it helps:

• Operating System version: Mac OS Catalina 10.15.3
• Browser version: Firefox
• Firebase SDK version: 7.9.1
• Firebase Product: Storage

Edit: this is still hapening with the latest SDK (7.13.2)
The POST call to https://firebasestorage.googleapis.com/v0/b/... just hangs forever.

[z6tanker]

Same issue, tested using angularfire.
OS: Windows 10
Browser: Chrome
Firebase SDK version: 7.14.3

Any work around for this?

[amitaggrawal]

I tried your code and even before 100% upload it is executing " upload complete" console log. Why don't you use 3rd optional complete function which you can pass along with next and error function and resolve and reject promise there?

const uploadTask = storage.ref(`images/${file.name}`).put(file);
    uploadTask.on("state_changed",
        snapshot => {
            const progress = Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100);
            console.log(progress);
            put({ type: videoUploadActionType.updateProgress, progress });
        },
        error => {
            console.log(error);
            reject(error);
        },
        () => {
            storage.ref('images')
                .child(file.name)
                .getDownloadURL()
                .then(url => {
                    console.log('[completed. Dowload URL]' + url);
                    resolve(url);
                }); 
 });

Storage object has been imported from separate file here but behind the scenes it is generated via

firebase.initializeApp(<firebase_config>);
const storage = firebase.storage();