- Created a download link component

- Created a storage list component

Author: JeremyVoisin

Diff for: firebase.json

@@ -6,6 +6,9 @@
     "firestore": {
       "port": 8080
     },
+    "storage": {
+      "port": 9199
+    },
     "hosting": {
       "port": 5000
     },
@@ -14,6 +17,9 @@
     },
     "singleProjectMode": true
   },
+  "storage": {
+    "rules": "storage.rules"
+  },
   "hosting": {
     "public": "docs/dist",
     "ignore": [

Diff for: package-lock.json

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import { downloadUrlStore } from '$lib/stores/storage.js';
+    import { getFirebaseContext } from '$lib/stores/sdk.js';
+    import type { FirebaseStorage, StorageReference } from 'firebase/storage';
+
+    export let ref: string | StorageReference;
+
+    const { storage } = getFirebaseContext();
+    const store = downloadUrlStore(storage!, ref);
+
+    interface $$Slots {
+        default: { link: string | null; ref: StorageReference | null; storage?: FirebaseStorage },
+        loading: {},
+    }
+</script>
+
+{#if $store !== undefined}
+    <slot link={$store} ref={store.reference} {storage}/>
+{:else}
+    <slot name="loading" />
+{/if}
+

Diff for: src/lib/components/DownloadLink.svelte

@@ -2,11 +2,13 @@
   import { setFirebaseContext } from "$lib/stores/sdk.js";
   import type { Auth } from "firebase/auth";
   import type { Firestore } from "firebase/firestore";
+  import type { FirebaseStorage } from "firebase/storage";
 
   export let firestore: Firestore;
   export let auth: Auth;
+  export let storage: FirebaseStorage;
 
-  setFirebaseContext({ firestore, auth });
+  setFirebaseContext({ firestore, auth, storage });
 </script>
 
 <slot />

Diff for: src/lib/components/FirebaseApp.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import { storageListStore } from '$lib/stores/storage.js';
+    import { getFirebaseContext } from '$lib/stores/sdk.js';
+    import type { FirebaseStorage, ListResult, StorageReference } from 'firebase/storage';
+
+    export let ref: string | StorageReference;
+
+    const { storage } = getFirebaseContext();
+    const listStore = storageListStore(storage!, ref);
+
+    interface $$Slots {
+        default: { list: ListResult | null; ref: StorageReference | null; storage?: FirebaseStorage },
+        loading: {},
+    }
+</script>
+
+{#if $listStore !== undefined}
+    <slot list={$listStore} ref={listStore.reference} {storage} />
+{:else}
+    <slot name="loading" />
+{/if}
+

Diff for: src/lib/components/StorageList.svelte

@@ -2,11 +2,13 @@ import { writable } from "svelte/store";
 import type { Firestore } from "firebase/firestore";
 import type { Auth } from "firebase/auth";
 import { getContext, setContext } from "svelte";
+import type { FirebaseStorage } from "firebase/storage";
 
 
 export interface FirebaseSDKContext {
   auth?: Auth;
   firestore?: Firestore;
+  storage?: FirebaseStorage;
 }
 
 export const contextKey = "firebase";

Diff for: src/lib/stores/sdk.ts

@@ -0,0 +1,118 @@
+import { writable } from "svelte/store";
+import { getDownloadURL, list, ref } from "firebase/storage";
+
+import type { 
+  StorageReference,
+  FirebaseStorage,
+  ListResult,
+} from "firebase/storage";
+
+const defaultListResult: ListResult = {
+  prefixes: [],
+  items: [],
+};
+
+interface StorageListStore {
+  subscribe: (cb: (value: ListResult) => void) => void | (() => void);
+  reference: StorageReference | null;
+}
+
+/**
+ * @param  {FirebaseStorage} storage firebase storage instance
+ * @param  {string|StorageReference} reference file or storage item path or reference
+ * @param  {{prefixes:[], items:[]}} startWith optional default data
+ * @returns a store with the list result
+ */
+export function storageListStore(
+  storage: FirebaseStorage,
+  reference: string | StorageReference,
+  startWith: ListResult = defaultListResult
+): StorageListStore {
+
+  // Fallback for SSR
+  if (!globalThis.window) {
+    const { subscribe } = writable(startWith);
+    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 } = writable(defaultListResult);
+    return {
+      subscribe,
+      reference: null,
+    };
+  }
+
+  const storageRef = typeof reference === "string" ? ref(storage, reference) : reference;
+
+  const { subscribe } = writable(startWith, (set) => {
+    list(storageRef).then((snapshot) => {
+      set(snapshot);
+    });
+  });
+
+  return {
+    subscribe,
+    reference: storageRef,
+  };
+}
+
+interface DownloadUrlStore {
+  subscribe: (cb: (value: string | null) => void) => void | (() => void);
+  reference: StorageReference | null;
+}
+
+/**
+ * @param  {FirebaseStorage} storage firebase storage instance
+ * @param  {string|StorageReference} reference file or storage item path or reference
+ * @param  {null} startWith optional default data
+ * @returns a store with the list result
+ */
+export function downloadUrlStore(
+  storage: FirebaseStorage,
+  reference: string | StorageReference,
+  startWith: string | null = null
+): DownloadUrlStore {
+
+  // Fallback for SSR
+  if (!globalThis.window) {
+    const { subscribe } = writable(startWith);
+    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 } = writable(null);
+    return {
+      subscribe,
+      reference: null,
+    };
+  }
+
+  const storageRef = typeof reference === "string" ? ref(storage, reference) : reference;
+
+  const { subscribe } = writable(startWith, (set) => {
+    getDownloadURL(storageRef).then((snapshot) => {
+      set(snapshot);
+    });
+  });
+
+  return {
+    subscribe,
+    reference: storageRef,
+  };
+}
+

Diff for: src/lib/stores/storage.ts

@@ -1,10 +1,9 @@
 <script lang="ts">
     import FirebaseApp from '$lib/components/FirebaseApp.svelte';
-    import { db as firestore, auth } from './firebase.js';
+    import { db as firestore, auth, storage } from './firebase.js';
 
 </script>
 
-<FirebaseApp {auth} {firestore}>
-
+<FirebaseApp {auth} {firestore} {storage}>
     <slot />
 </FirebaseApp>

Diff for: src/routes/+layout.svelte

@@ -12,8 +12,10 @@
   <li><a href="/auth-test">Auth Test</a></li>
   <li><a href="/firestore-test">Firestore Test</a></li>
   <li><a href="/ssr-test">SSR Test</a></li>
+  <li><a href="/storage-test">Storage Test</a></li>
 </ul>
 <ul>
   <li data-testid="auth">Auth Context: {!!ctx.auth}</li>
   <li data-testid="firestore">Firestore Context: {!!ctx.firestore}</li>
+  <li data-testid="firestore">Storage Context: {!!ctx.storage}</li>
 </ul>

Diff for: src/routes/+page.svelte

@@ -2,8 +2,6 @@
   import SignedIn from '$lib/components/SignedIn.svelte';
   import SignedOut from '$lib/components/SignedOut.svelte';
   import { signInAnonymously } from "firebase/auth";
-
-
 </script>
 
 <h1>Auth Test</h1>

Diff for: src/routes/auth-test/+page.svelte

@@ -2,6 +2,7 @@ import { initializeApp } from "firebase/app";
 import { connectFirestoreEmulator, doc, getFirestore, setDoc } from "firebase/firestore";
 import { connectAuthEmulator, getAuth } from "firebase/auth";
 import { dev } from "$app/environment";
+import { connectStorageEmulator, getStorage, ref, uploadString } from "firebase/storage";
 
 
 const firebaseConfig = {
@@ -18,15 +19,30 @@ const firebaseConfig = {
 export const app = initializeApp(firebaseConfig);
 export const db = getFirestore(app);
 export const auth = getAuth(app);
+export const storage = getStorage(app);
 
 if (dev) {
     connectAuthEmulator(auth, "http://localhost:9099");
     connectFirestoreEmulator(db, "localhost", 8080);
+    connectStorageEmulator(storage, "localhost", 9199);
 
     // Seed Firestore
     setDoc(doc(db, "posts", "test"), {
         title: "Hi Mom",
         content: "this is a test"
     });
+
+    
+    // Create a reference to the file to create
+    const fileRef = ref(storage, "test.txt");
+
+    // Upload a string to the file
+    uploadString(fileRef, "Hello, world!", "raw")
+        .then(() => {
+            console.log("File created successfully!");
+        })
+        .catch((error) => {
+            console.error("Error creating file:", error);
+        });
 }
 

Diff for: src/routes/firebase.ts

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import DownloadLink from "$lib/components/DownloadLink.svelte";
+    import StorageList from "$lib/components/StorageList.svelte";
+</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 href="{link}" download>{ref?.name}</a>
+                    </DownloadLink>
+                </li>
+            {/each}
+        {/if}
+    </ul>
+</StorageList>

Diff for: src/routes/storage-test/+page.svelte

@@ -0,0 +1,12 @@
+// Firebase Storage Rules allow you to define how your data should be structured and when data can be read or written.
+// See https://firebase.google.com/docs/storage/security/start for more information.
+rules_version='2'
+// Anyone can read or write to the bucket, even non-users of your app.
+// Because it is shared with Google App Engine, this will also make files uploaded via App Engine public.
+service firebase.storage {
+    match /b/{bucket}/o {
+        match /{allPaths=**} {
+            allow read, write: if true;
+        }
+    }
+}

Diff for: storage.rules

@@ -9,4 +9,5 @@ test('Firebase SDK context is defined via FirebaseApp component', async ({ page
 	await page.goto('/');
 	await expect( page.getByTestId('auth')).toContainText('true');
 	await expect( page.getByTestId('firestore')).toContainText('true');
+	await expect( page.getByTestId('storage')).toContainText('true');
 });