Merge pull request #112 from JeremyVoisin/feature/storage-list-and-download

Adding DownloadLink and StorageList components

Author: codediodeio

README.md

@@ -279,6 +279,47 @@ Collections can also take a Firestore Query instead of a path:
 </Collection>
 ```
 
+### DownloadLink
+
+DownloadLink 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>
+```
+
+### StorageList
+
+StorageList provides a list of `items` and `prefixes` corresponding to the list of objects and sub-folders at a given Firebase Storage path. 
+
+```svelte
+<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}
+          <!-- Listing the prefixes -->
+          {#each list.prefixes as prefix}
+              <li>
+                  {prefix.name}
+              </li>
+          {/each}
+          <!-- Listing the objects in the given folder -->
+          {#each list.items as item}
+              <li>
+                  {item.name}
+              </li>
+          {/each}
+        {/if}
+    </ul>
+</StorageList>
+```
+
+You can combine 
+
 ### 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.

dist/components/FirebaseApp.svelte

@@ -1,7 +1,8 @@
 <script>import { setFirebaseContext } from "../stores/sdk.js";
 export let firestore;
 export let auth;
-setFirebaseContext({ firestore, auth });
+export let storage;
+setFirebaseContext({ firestore, auth, storage });
 </script>
 
 <slot />

dist/components/FirebaseApp.svelte.d.ts

@@ -1,10 +1,12 @@
 import { SvelteComponent } from "svelte";
 import type { Auth } from "firebase/auth";
 import type { Firestore } from "firebase/firestore";
+import type { FirebaseStorage } from "firebase/storage";
 declare const __propDef: {
     props: {
         firestore: Firestore;
         auth: Auth;
+        storage: FirebaseStorage;
     };
     events: {
         [evt: string]: CustomEvent<any>;

dist/stores/sdk.d.ts

@@ -1,8 +1,10 @@
 import type { Firestore } from "firebase/firestore";
 import type { Auth } from "firebase/auth";
+import type { FirebaseStorage } from "firebase/storage";
 export interface FirebaseSDKContext {
     auth?: Auth;
     firestore?: Firestore;
+    storage?: FirebaseStorage;
 }
 export declare const contextKey = "firebase";
 export declare function setFirebaseContext(sdks: FirebaseSDKContext): void;

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": [

src/lib/components/DownloadLink.svelte

@@ -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}
+

src/lib/components/FirebaseApp.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 />

src/lib/components/StorageList.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}
+

src/lib/stores/sdk.ts

@@ -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";

src/lib/stores/storage.ts

@@ -0,0 +1,118 @@
+import { readable } 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 } = readable(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 } = readable(defaultListResult);
+    return {
+      subscribe,
+      reference: null,
+    };
+  }
+
+  const storageRef = typeof reference === "string" ? ref(storage, reference) : reference;
+
+  const { subscribe } = readable(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 } = readable(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 } = readable(null);
+    return {
+      subscribe,
+      reference: null,
+    };
+  }
+
+  const storageRef = typeof reference === "string" ? ref(storage, reference) : reference;
+
+  const { subscribe } = readable(startWith, (set) => {
+    getDownloadURL(storageRef).then((snapshot) => {
+      set(snapshot);
+    });
+  });
+
+  return {
+    subscribe,
+    reference: storageRef,
+  };
+}
+