refactor: support UploadTask and StorageRef

Made changes to current PR to align with Firebase Storage SDK features

Author: codediodeio

README.md

@@ -437,30 +437,33 @@ Slot Props & Events:
 
 Note: Each data item in the collection contains the document data AND fields for the `id` and `ref` (DocumentReference). 
 
-### `<File>`
+### `<StorageRef>`
 
-Retrives a file from Firebase storage.
+Retrives a downloadURL and metada from Firebase storage.
 
 Props:
 
-- *path (required)* to file in storage i.e `images/mountain.jpg`
+- *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 file is available. 
+- *default slot*  shown when downloadURL is available. 
 - *loading*  shown when waiting for response. 
 - *fallback* shown when error occurs. 
 
 
 Slot Props & Events: 
 
-- *url* url to resource
-- *ref* File Reference for direct acess
+- *downloadURL* url to resource
+- *metadata* file metadata
+- *ref* Storage Reference for direct access
 
 ```html
-<File {path} let:url let:ref>
+<StorageRef {path} let:downloadURL let:ref meta let:metadata> 
 
-    <img src={url} />
+    <img src={downloadURL} />
 
     <div slot="loading">
         Loading...
@@ -470,42 +473,47 @@ Slot Props & Events:
         Error
     </div>
 
-</File>
+</StorageRef>
 ```
 
-### `<Upload>`
+### `<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"
-- *file* file to upload as a file object `Blob` or `Unit8Array`
+- *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 before upload is complete.
-- *complete*  shown when upload is complete.
+- *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: 
 
-- *url* url to uploaded file.
-- *task* Firebase upload task.
-- *snapshot* snapshot of upload, useful for monitoring progress.
+- *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
-<Upload {file} {path} let:task let:snapshot let:url>
+<UploadTask {file} {path} let:task let:snapshot let:downloadURL={url}>
+
+   Uploading your file...
 
-   Uploading your file... {snaphot.bytesTransferred}
+   Progress: {(snapshot.bytesTransferred / snapshot.totalBytes) * 100} %
 
   <div slot="complete">
-    Download here {url}
+    Success! Download here {url}
   </div>
 
   <div slot="fallback">
     Error or canceled
   </div>
 
-</Upload>
+</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/File.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" />