feat: storage uploadTask

Author: codediodeio

README.md

@@ -279,14 +279,14 @@ Collections can also take a Firestore Query instead of a path:
 </Collection>
 ```
 
-### DownloadLink
+### DownloadURL
 
-DownloadLink provides a `link` to download a file from Firebase Storage and its `reference`. 
+DownloadURL provides a `link` to download a file from Firebase Storage and its `reference`. 
 
 ```svelte
-<DownloadLink ref={item} let:link let:ref>
-    <a href="{link}" download>Download {ref?.name}</a>
-</DownloadLink>
+<DownloadURL ref={item} let:link let:ref>
+    <a href={link} download>Download {ref?.name}</a>
+</DownloadURL>
 ```
 
 ### StorageList
@@ -318,9 +318,26 @@ StorageList provides a list of `items` and `prefixes` corresponding to the list
 </StorageList>
 ```
 
-You can combine 
+### UploadTask
 
-### Using Components Together
+Upload a file with progress tracking
+
+```svelte
+<UploadTask ref="filename.txt" data={someBlob} let:progress let:snapshot>
+  {#if snapshot?.state === "running"}
+    {progress}% uploaded
+  {/if}
+
+  {#if snapshot?.state === "success"}
+    <DownloadURL ref={snapshot?.ref} let:link>
+      <a href={link} download>Download</a>
+    </DownloadURL>
+  {/if}
+</UploadTask>
+```
+
+
+## Using Components Together
 
 These components can be combined to build complex realtime apps. It's especially powerful when fetching data that requires the current user's UID or a related document's path.
 

docs/src/pages/_alt.astro

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { uploadTaskStore } from "$lib/stores/storage.js";
+  import { getFirebaseContext } from "$lib/stores/sdk.js";
+  import type {
+    FirebaseStorage,
+    UploadTask,
+    StorageReference,
+    UploadMetadata,
+    UploadTaskSnapshot,
+  } from "firebase/storage";
+
+  export let ref: string | StorageReference;
+  export let data: Blob | Uint8Array | ArrayBuffer;
+  export let metadata: UploadMetadata | undefined = undefined;
+
+  const { storage } = getFirebaseContext();
+  const upload = uploadTaskStore(storage!, ref, data, metadata);
+
+  interface $$Slots {
+    default: {
+      task: UploadTask | undefined;
+      ref: StorageReference | null;
+      snapshot: UploadTaskSnapshot | null;
+      progress: number;
+      storage?: FirebaseStorage;
+    };
+  }
+
+  $: progress = ($upload?.bytesTransferred! / $upload?.totalBytes!) * 100 ?? 0;
+</script>
+
+{#if $upload !== undefined}
+  <slot task={$upload?.task} snapshot={$upload} {progress} ref={upload.reference} {storage} />
+{/if}

src/lib/components/DownloadLink.svelte renamed to src/lib/components/DownloadURL.svelte

@@ -5,19 +5,29 @@ import Doc from './components/Doc.svelte';
 import FirebaseApp from './components/FirebaseApp.svelte';
 import SignedIn from './components/SignedIn.svelte';
 import SignedOut from './components/SignedOut.svelte';
+import DownloadURL from './components/DownloadURL.svelte';
+import StorageList from './components/StorageList.svelte';
+import UploadTask from './components/UploadTask.svelte';
 import { userStore } from './stores/auth.js';
 import { docStore, collectionStore  } from './stores/firestore.js';
 import { getFirebaseContext } from './stores/sdk.js';
- 
+import { downloadUrlStore, storageListStore, uploadTaskStore } from './stores/storage.js';
+
 export {
     Doc,
     User,
     Collection,
     FirebaseApp,
     SignedOut,
     SignedIn,
+    UploadTask,
+    StorageList,
+    DownloadURL,
+    downloadUrlStore,
+    storageListStore,
+    uploadTaskStore,
     docStore,
     collectionStore,
     userStore,
-    getFirebaseContext
+    getFirebaseContext,
 }

src/lib/components/UploadTask.svelte

@@ -1,10 +1,17 @@
 import { readable } from "svelte/store";
-import { getDownloadURL, list, ref } from "firebase/storage";
+import {
+  getDownloadURL,
+  list,
+  ref,
+  uploadBytesResumable,
+} from "firebase/storage";
 
-import type { 
+import type {
   StorageReference,
   FirebaseStorage,
   ListResult,
+  UploadTaskSnapshot,
+  UploadMetadata,
 } from "firebase/storage";
 
 const defaultListResult: ListResult = {
@@ -28,7 +35,6 @@ export function storageListStore(
   reference: string | StorageReference,
   startWith: ListResult = defaultListResult
 ): StorageListStore {
-
   // Fallback for SSR
   if (!globalThis.window) {
     const { subscribe } = readable(startWith);
@@ -50,7 +56,8 @@ export function storageListStore(
     };
   }
 
-  const storageRef = typeof reference === "string" ? ref(storage, reference) : reference;
+  const storageRef =
+    typeof reference === "string" ? ref(storage, reference) : reference;
 
   const { subscribe } = readable(startWith, (set) => {
     list(storageRef).then((snapshot) => {
@@ -80,7 +87,6 @@ export function downloadUrlStore(
   reference: string | StorageReference,
   startWith: string | null = null
 ): DownloadUrlStore {
-
   // Fallback for SSR
   if (!globalThis.window) {
     const { subscribe } = readable(startWith);
@@ -102,7 +108,8 @@ export function downloadUrlStore(
     };
   }
 
-  const storageRef = typeof reference === "string" ? ref(storage, reference) : reference;
+  const storageRef =
+    typeof reference === "string" ? ref(storage, reference) : reference;
 
   const { subscribe } = readable(startWith, (set) => {
     getDownloadURL(storageRef).then((snapshot) => {
@@ -116,3 +123,65 @@ export function downloadUrlStore(
   };
 }
 
+interface UploadTaskStore {
+  subscribe: (
+    cb: (value: UploadTaskSnapshot | null) => void
+  ) => void | (() => void);
+  reference: StorageReference | null;
+}
+
+export function uploadTaskStore(
+  storage: FirebaseStorage,
+  reference: string | StorageReference,
+  data: Blob | Uint8Array | ArrayBuffer,
+  metadata?: UploadMetadata | undefined
+): UploadTaskStore {
+  // Fallback for SSR
+  if (!globalThis.window) {
+    const { subscribe } = readable(null);
+    return {
+      subscribe,
+      reference: null,
+    };
+  }
+
+  // Fallback for missing SDK
+  if (!storage) {
+    console.warn(
+      "Cloud Storage is not initialized. Are you missing FirebaseApp as a parent component?"
+    );
+    const { subscribe } = readable(null);
+    return {
+      subscribe,
+      reference: null,
+    };
+  }
+
+  const storageRef =
+    typeof reference === "string" ? ref(storage, reference) : reference;
+
+  let unsubscribe: () => void;
+
+  const { subscribe } = readable<UploadTaskSnapshot | null>(null, (set) => {
+    const task = uploadBytesResumable(storageRef, data, metadata);
+    unsubscribe = task.on(
+      "state_changed",
+      (snapshot) => {
+        set(snapshot);
+      },
+      (error) => {
+        console.error(error);
+        set(task.snapshot);
+      },
+      () => {
+        set(task.snapshot);
+      }
+    );
+    return () => unsubscribe();
+  });
+
+  return {
+    subscribe,
+    reference: storageRef,
+  };
+}

src/lib/index.js

@@ -1,24 +1,58 @@
 <script lang="ts">
-    import DownloadLink from "$lib/components/DownloadLink.svelte";
-    import StorageList from "$lib/components/StorageList.svelte";
+  import DownloadURL from "$lib/components/DownloadURL.svelte";
+  import StorageList from "$lib/components/StorageList.svelte";
+  import UploadTask from "$lib/components/UploadTask.svelte";
+
+  let file: any;
+
+  function makeFile() {
+    file = new Blob(["test"], { type: "text/plain" });
+  }
+
+  function chooseFile(e: any) {
+    file = e.target.files[0];
+  }
 </script>
 
 <h1>Storage Test</h1>
 
 <StorageList ref="/" let:list>
-    <ul>
-        {#if list === null}
-            <li>Loading...</li>
-        {:else if list.prefixes.length === 0 && list.items.length === 0}
-            <li>Empty</li>
-        {:else}
-            {#each list.items as item}
-                <li>
-                    <DownloadLink ref={item} let:link let:ref>
-                        <a data-testid="download-link" href="{link}" download>{ref?.name}</a>
-                    </DownloadLink>
-                </li>
-            {/each}
-        {/if}
-    </ul>
+  <ul>
+    {#if list === null}
+      <li>Loading...</li>
+    {:else if list.prefixes.length === 0 && list.items.length === 0}
+      <li>Empty</li>
+    {:else}
+      {#each list.items as item}
+        <li>
+          <DownloadURL ref={item} let:link let:ref>
+            <a data-testid="download-link" href={link} download>{ref?.name}</a>
+          </DownloadURL>
+        </li>
+      {/each}
+    {/if}
+  </ul>
 </StorageList>
+
+<h2>Upload Task</h2>
+
+<input type="file" on:change={chooseFile} />
+<button on:click={makeFile}>Make File</button>
+
+{#if file}
+  <UploadTask ref="test-upload.txt" data={file} let:progress let:snapshot>
+    {#if snapshot?.state === "running" || snapshot?.state === "success"}
+      <p data-testid="progress">{progress}% uploaded</p>
+    {/if}
+
+    {#if snapshot?.state === "error"}
+      Upload failed
+    {/if}
+
+    {#if snapshot?.state === "success"}
+      <DownloadURL ref={snapshot?.ref} let:link let:ref>
+        <a data-testid="download-link2" href={link} download> {ref?.name} </a>
+      </DownloadURL>
+    {/if}
+  </UploadTask>
+{/if}

src/lib/stores/storage.ts

@@ -8,3 +8,9 @@ test('Renders download links', async ({ page }) => {
 	expect( linksCount ).toBeGreaterThan(0);
 });
 
+test.only('Uploads a file', async ({ page }) => {
+	await page.goto('/storage-test');
+	await page.getByRole('button', { name: 'Make File' }).click();
+	await expect(page.getByTestId('progress')).toContainText('100% uploaded');
+	await expect(page.getByTestId('download-link2')).toContainText('test-upload.txt');
+});