Merge pull request #7 from codediodeio/tk2217-master

Tk2217 master - Add support for Firebase Storage

Author: codediodeio

README.md

@@ -436,3 +436,84 @@ Slot Props & Events:
 ```
 
 Note: Each data item in the collection contains the document data AND fields for the `id` and `ref` (DocumentReference). 
+
+### `<StorageRef>`
+
+Retrives a downloadURL and metada from Firebase storage.
+
+Props:
+
+- *path (required)* to file in storage i.e `images/mountain.jpg` or a [Reference](https://firebase.google.com/docs/reference/js/firebase.storage.Reference)
+- *meta* include metadata with file. Default `false`. 
+- *startWith* start with a default URL. Pass an object like `{ url: someURL }`
+
+Slots: 
+
+- *default slot*  shown when downloadURL is available. 
+- *loading*  shown when waiting for response. 
+- *fallback* shown when error occurs. 
+
+
+Slot Props & Events: 
+
+- *downloadURL* url to resource
+- *metadata* file metadata
+- *ref* Storage Reference for direct access
+
+```html
+<StorageRef {path} let:downloadURL let:ref meta let:metadata> 
+  
+    <img src={downloadURL} />
+
+    <div slot="loading">
+        Loading...
+    </div>
+
+    <div slot="fallback">
+        Error
+    </div>
+
+</StorageRef>
+```
+
+### `<UploadTask>`
+
+Creates an [UploadTask](https://firebase.google.com/docs/reference/js/firebase.storage.UploadTask) that transmits a file to Firebase storage.
+
+Props:
+
+- *path (required)* to upload to i.e "images/mountain.jpg" or a [Reference](https://firebase.google.com/docs/reference/js/firebase.storage.Reference)
+- *file* file to upload as a `File` object `Blob` or `Unit8Array`. 
+- 
+
+Slots: 
+
+- *default slot*  shown while task is created. 
+- *complete*  shown when task state is `success` and url is available.
+- *fallback* shown when error occurs or upload is cancelled.
+
+
+Slot Props & Events: 
+
+- *snapshot* snapshot of upload, useful for monitoring progress. 
+- *task* Firebase upload task. Use it to pause, resume, and cancel. `task.pause()`
+- *downLoadURL* url to uploaded file.
+
+
+```html
+<UploadTask {file} {path} let:task let:snapshot let:downloadURL={url}>
+
+   Uploading your file...
+
+   Progress: {(snapshot.bytesTransferred / snapshot.totalBytes) * 100} %
+
+  <div slot="complete">
+    Success! Download here {url}
+  </div>
+
+  <div slot="fallback">
+    Error or canceled
+  </div>
+
+</UploadTask>
+```

example/src/App.svelte

@@ -2,11 +2,12 @@
   export let name;
   import { writable } from "svelte/store";
   import { onMount } from "svelte";
-  import { FirebaseApp, Doc, Collection, User } from "sveltefire";
+  import { FirebaseApp, Doc, Collection, User, UploadTask, StorageRef } from "sveltefire";
 
   import firebase from "firebase/app";
   import "firebase/firestore";
   import "firebase/auth";
+  import "firebase/storage";
   import "firebase/performance"; // Optional
   import "firebase/analytics"; // Optional
 
@@ -28,6 +29,8 @@
   let eventData = {};
   let eventRef = {};
 
+  let readyToUpload = false;
+
   function onData(e) {
     eventData = e.detail.data;
   }
@@ -61,14 +64,18 @@
 </script>
 
 <style>
-
+  h1 {
+    border-bottom: 1px dashed rgb(185, 185, 185);
+  }
 </style>
 
 <FirebaseApp {firebase} on:initializeApp={useEmulator} perf analytics>
 
-  <h1>Firebase Ready {appName}</h1>
+  <h1>FirebaseApp</h1>
+
+  <p>Firebase Ready {appName}</p>
 
-  <h1>User Login</h1>
+  <h1>User</h1>
   <User let:user let:auth>
 
     <div slot="signed-out">
@@ -82,7 +89,7 @@
     UID: {user.uid}
     <button on:click={() => auth.signOut()}>Sign Out</button>
 
-    <h2>Firestore</h2>
+    <h1>Firestore</h1>
 
     <Doc path={`posts/first-post`} let:data={post} let:ref={postRef} log>
       <div slot="loading">Loading...</div>
@@ -176,7 +183,7 @@
   </Doc>
 
 
-  <h2>Events</h2>
+  <h3>Events</h3>
 
   <p>Path: {eventRef.path}</p>
   <p>Event Data: {eventData && eventData.title}</p>
@@ -185,4 +192,43 @@
   </button>
 
   <Doc path={'posts/event-post'} on:data={onData} on:ref={onRef} />
+
+
+
+
+  <h1>Storage</h1>
+
+  <button on:click={(e) => readyToUpload = true }>Start Upload</button>
+
+  {#if readyToUpload}
+
+    <h3>UploadTask:</h3>
+
+    <UploadTask path={'myfile.txt'} file={new File(['hello world'], 'filename')} let:task let:snapshot let:downloadURL>
+
+      Progress  {(snapshot.bytesTransferred / snapshot.totalBytes) * 100} <br>
+      State {snapshot.state}
+
+      <button on:click={() => task.pause()}>Pause</button>
+
+      <div slot="complete">DownloadURL: {downloadURL}</div>
+
+    </UploadTask>
+
+  {/if}
+
+
+  <h3>File</h3>
+
+  <StorageRef path={'myfile.txt'} meta let:metadata let:downloadURL>
+
+    URL: {downloadURL} <br>
+    Meta: {JSON.stringify(metadata)}
+
+    <div slot="loading">Loading file...</div>
+  </StorageRef>
+
+
 </FirebaseApp>
+
+<div style="height: 500px"></div>

src/StorageRef.svelte

@@ -0,0 +1,64 @@
+<script>
+  export let path = "";
+  export let log = false;
+  export let traceId = "";
+  export let startWith = undefined;
+  export let url = true;
+  export let meta = false;
+
+  import { onDestroy, onMount, createEventDispatcher } from "svelte";
+  import { fileDownloadStore } from "./storage";
+
+  const opts = {
+    startWith,
+    traceId,
+    log,
+    meta,
+    url,
+  };
+
+  let store = fileDownloadStore(path, opts);
+
+  const dispatch = createEventDispatcher();
+
+  let unsub;
+
+  // Props changed
+  $: {
+    if (unsub) {
+      // Unsub and create new store
+      unsub();
+      store = fileDownloadStore(path, opts);
+      dispatch("ref", { ref: store.ref });
+    }
+
+    unsub = store.subscribe(result => {
+     if (result) {
+      dispatch("storageResult", {
+        downloadURL: result[0],
+        metadata: result[1],
+      });
+     }
+
+    });
+  }
+
+  onMount(() => dispatch("ref", { ref: store.ref }));
+  onDestroy(() => unsub());
+</script>
+
+<slot name="before" />
+
+{#if $store}
+  <slot
+    downloadURL={$store && $store.url}
+    metadata={$store && $store.metadata}
+    ref={store.ref}
+    error={store.error} />
+{:else if store.loading}
+  <slot name="loading" />
+{:else}
+  <slot name="fallback" />
+{/if}
+
+<slot name="after" />

src/UploadTask.svelte

@@ -0,0 +1,58 @@
+<script>
+  export let path;
+  export let file;
+  export let log = false;
+  export let traceId = "";
+
+  import { onDestroy, onMount, createEventDispatcher } from "svelte";
+  import { uploadTaskStore } from "./storage";
+
+  const opts = {
+    traceId,
+    log,
+  }
+
+  let store = uploadTaskStore(path, file, opts);
+
+  const dispatch = createEventDispatcher();
+
+  let unsub;
+
+  // Props changed
+  $: {
+    if (unsub) {
+      // Unsub and create new store
+      unsub();
+      store = uploadTaskStore(path, file, opts);
+      dispatch("ref", { ref: store.ref });
+    }
+
+    unsub = store.subscribe(snapshot => {
+      dispatch("snapshot", {
+        snapshot
+      });
+    });
+  }
+
+  onMount(() => dispatch("ref", { ref: store.ref }))
+  onDestroy(() => unsub());
+</script>
+
+<slot name="before" />
+
+{#if $store}
+  <slot 
+    snapshot={$store} 
+    ref={store.ref} 
+    task={store.task}
+    downloadURL={store.downloadURL} 
+    error={store.error} />
+{:else}
+  <slot name="fallback" />
+{/if}
+
+{#if store.downloadURL}
+  <slot name="complete" />
+{/if}
+
+<slot name="after" />

src/index.js

@@ -4,7 +4,9 @@ import Doc from './Doc.svelte';
 import Collection from './Collection.svelte';
 import { userStore } from './auth';
 import { docStore, collectionStore } from './firestore';
-
+import { fileDownloadStore, uploadTaskStore } from './storage';
+import StorageRef from './StorageRef.svelte';
+import UploadTask from './UploadTask.svelte';
 
 export {
     FirebaseApp,
@@ -14,4 +16,8 @@ export {
     userStore,
     docStore,
     collectionStore,
+    fileDownloadStore,
+    uploadTaskStore,
+    StorageRef,
+    UploadTask,
 }