Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

"FirebaseError: Firebase Storage: An unknown error occurred ... (storage/unknown)" when using resume()/resume()/cancel() Methods on resumable UploadTask while on "Demo" emulator #5412

Closed
simenness opened this issue Jan 11, 2023 · 3 comments · Fixed by #5425
Closed

"FirebaseError: Firebase Storage: An unknown error occurred ... (storage/unknown)" when using resume()/resume()/cancel() Methods on resumable UploadTask while on "Demo" emulator #5412

simenness opened this issue Jan 11, 2023 · 3 comments · Fixed by #5425
Assignees
@maneesht
Labels
emulators: storage type: bug

Comments

@simenness
Copy link

simenness commented Jan 11, 2023 •
edited
Loading

[REQUIRED] Environment info

firebase-tools: 11.20.0

Platform: Windows

[REQUIRED] Test case

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Firebase Storage Emulator Demo</title>
    <style>
      html {
        font-family: "Roboto", sans-serif;
        color: #999;
        background-color: #222;
      }
    </style>
  </head>
  <body>
    <h1>Firebase Storage Emulator Demo</h1>
    <p>
      This is a demo of the Firebase Storage Emulator. It is a simple web app
      that uploads files to Firebase Storage and lists the uploaded files.
    </p>
    <div>
      <input type="file" id="file" />
      <span id="state"></span>
    </div>
    <div>
      <button id="upload">Upload</button>
      <button id="pause">Pause</button>
      <button id="resume">Resume</button>
      <button id="cancel">Cancel</button>
    </div>

    <div id="files"></div>
  </body>
  <script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js";
    import {
      getStorage,
      ref,
      uploadBytesResumable,
      getDownloadURL,
      connectStorageEmulator,
    } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-storage.js";

    // Firebase configuration
    const firebaseConfig = {
      projectId: "demo-ember",
      appId: "demo",
      apiKey: "demo",
      authDomain: "demo",
      storageBucket: "demo",
    };

    // Initialize Firebase
    initializeApp(firebaseConfig);

    // Use the Firebase Storage emulator
    connectStorageEmulator(getStorage(), "localhost", 9199);

    // Buttons
    const upload = document.getElementById("upload");
    const pause = document.getElementById("pause");
    const resume = document.getElementById("resume");
    const cancel = document.getElementById("cancel");

    const stateValue = document.getElementById("state");

    // Upload button click handler
    upload.addEventListener("click", (e) => {
      // Get the file
      const file = document.getElementById("file").files[0];

      // Create a storage ref
      const storageRef = ref(getStorage(), file.name);

      // Upload file and metadata to the object 'images/mountains.jpg'
      const uploadTask = uploadBytesResumable(storageRef, file);

      // Pause button click handler
      pause.addEventListener("click", (e) => {
        // console log that the user clicked the pause button, and make the log text amber
        console.log("%cUser clicked pause button", "color: orange");
        uploadTask.pause();
      });

      // Resume button click handler
      resume.addEventListener("click", (e) => {
        console.log("%cUser clicked resume button", "color: orange");
        uploadTask.resume();
      });

      // Cancel button click handler
      cancel.addEventListener("click", (e) => {
        console.log("%cUser clicked cancel button", "color: orange");
        uploadTask.cancel();
      });

      // Listen for state changes, errors, and completion of the upload.
      uploadTask.on(
        "state_changed",
        (snapshot) => {
          const progress =
            (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
          console.log("Upload is " + progress + "% done");

          switch (snapshot.state) {
            case "paused":
              stateValue.innerHTML = "Paused";
              console.log("Upload is paused");
              break;
            case "running":
              stateValue.innerHTML = "Running";
              console.log("Upload is running");
              break;
          }
        },
        (error) => {
          stateValue.innerHTML = "ERROR";
          console.log(error);
        },
        () => {
          stateValue.innerHTML = "Complete";
          console.log("upload commplete");
        }
      );
    });
  </script>
</html>

[REQUIRED] Steps to reproduce

Use the HTML file above to upload a file to the Emulator, then hit pause before it's finished.

Emulator is simply running from...
firebase emulators:start --project demo-ember

[REQUIRED] Expected behavior

I'd expect the uploadTask to be paused/resumed/canceled when the methods are used.

[REQUIRED] Actual behavior

UploadTasks throw FirebaseError: Firebase Storage: An unknown error occurred, please check the error payload for server response. (storage/unknown) when the pause()/resume()/cancel() method(s) are used.

firebase-debug.log
ui-debug.log

Edit: made Expected & Actual behavior easier to understand.
@simenness simenness added the bug label Jan 11, 2023
@tonyjhuang
Copy link
Contributor

Might be related to firebase/firebase-js-sdk#6935 which we are working on a fix for. @maneesht do you mind verifying if these two are the same issue?

@simenness
Copy link
Author

Looks to be the same... I'll test and see if I get the same outcome

... with firebase@9.7.0 there is no problem
@ firebase/firebase-js-sdk#6935 (comment)

@simenness
Copy link
Author

simenness commented Jan 13, 2023 •
edited
Loading

Just tested with firebase@9.7.0,
like the mentioned issue firebase/firebase-js-sdk#6935,
pausing works fine... just as mentioned in that issue (firebase/firebase-js-sdk#6935 (comment)),
but resuming fails with FirebaseError: Firebase Storage: An unknown error occurred, please check the error payload for server response. (storage/unknown) like it does with pause(), resume() and cancel() on firebase@9.15.0

Edit: Added cancel() at the end after testing again.
Edit: words?

@maneesht maneesht mentioned this issue Jan 13, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@maneesht maneesht

Labels
emulators: storage type: bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Added status header for query upload requests firebase/firebase-tools
5 participants
@tonyjhuang @maneesht @simenness @christhompsongoogle @aalej