title: Firebase Storage: An unknown error occurred, please check the error payload for server response
body: <p>I am trying to create a Vue Composable that uploads a file to Firebase Storage.</p>
  <p>To do this I am using the modular Firebase 9 version.</p>
  <p>But my current code does not upload anything, and instead returns this error: <code>FirebaseError: Firebase Storage: An unknown error occurred, please check the error payload for server response. (storage/unknown)</code></p>
  <p>Since this error is already coming from my <code>console.log(&quot;ERROR&quot;, err);</code> I'm not sure where else to look for a solution.</p>
  <p>My code is implemented using TypeScript, incase that matters.</p>
  <pre><code>import { projectStorage } from &quot;@/firebase/config&quot;;
  import { ref, watchEffect } from &quot;vue&quot;;
  import {
    ref as storageRef,
    uploadBytesResumable,
    UploadTaskSnapshot,
    UploadTask,
    getDownloadURL,
    StorageError,
  } from &quot;firebase/storage&quot;;
  
  const useStorage: any = (file: File) =&gt; {
    const error = ref&lt;StorageError | null&gt;(null);
    const url = ref&lt;string | null&gt;(null);
    const progress = ref&lt;number | null&gt;(null);
    watchEffect(() =&gt; {
      // references
      const storageReference = storageRef(projectStorage, &quot;images/&quot; + file.name);
      // upload file
      const uploadTask: UploadTask = uploadBytesResumable(storageReference, file);
      // update progess bar as file uploads
      uploadTask.on(
        &quot;state_changed&quot;,
        (snapshot: UploadTaskSnapshot) =&gt; {
          console.log(&quot;SNAPSHOT&quot;, snapshot);
        },
        (err) =&gt; {
          error.value = err;
          console.log(&quot;ERROR&quot;, err);
        },
        async () =&gt; {
          // get download URL &amp; make firestore doc
          const downloadUrl = await getDownloadURL(storageReference);
          url.value = downloadUrl;
          console.log(&quot;DOWNLOADURL&quot;, downloadUrl);
        }
      );
    });
    return { progress, url, error };
  };
  export default useStorage;
  </code></pre>