Merge pull request #118 from codediodeio/upload-task

Upload task

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/components/SideNav.astro

@@ -18,9 +18,9 @@
     <li><a href="/firestore/doc-component">&ltDoc&gt</a></li>
     <li><a href="/firestore/collection-component">&ltCollection&gt</a></li>
     <li class="heading">storage</li>
-    <li><a href="/guide/todo">uploadTaskStore</a></li>
-    <li><a href="/guide/todo">&ltFileUploader&gt</a></li>
-    <li><a href="/guide/todo">&ltDownloadURL&gt</a></li>
+    <li><a href="/storage/upload-task">&ltUploadTask&gt</a></li>
+    <li><a href="/storage/download-url">&ltDownloadURL&gt</a></li>
+    <li><a href="/storage/storage-list">&ltStorageList&gt</a></li>
     <li class="heading">analytics</li>
     <li><a href="/guide/todo">&ltPageView&gt</a></li>
   </ul>

docs/src/pages/storage/download-url.md

@@ -0,0 +1,42 @@
+---
+title: DownloadURL Component
+pubDate: 2023-07-23
+description: SvelteFire DownloadURL Component API reference
+layout: ../../layouts/MainLayout.astro
+---
+
+# DownloadURL
+
+Returns the download URL for a file in Firebase Storage.
+
+### Props
+
+- `ref` - A Firebase Storage reference or path string (e.g. `files/hi-mom.txt`)
+
+### Slots
+
+- `default` - Shown when the url is available
+- `loading` - Shown while the url is loading
+
+### Slot Props
+
+- `link` - The download URL
+- `ref` - Storage reference
+- `storage` - The Firestore instance
+
+### Example
+
+```svelte
+<script>
+  import  { DownloadURL } from "sveltefire";
+</script>
+
+
+<DownloadURL ref="images/pic.png" let:link let:ref>
+    <!-- show img -->
+    <img src={link} />
+
+    <!-- or download via link -->
+    <a href={link} download>{ref?.name}</a>
+</DownloadURL>
+```

docs/src/pages/storage/storage-list.md

@@ -0,0 +1,57 @@
+---
+title: StorageList Component
+pubDate: 2023-07-23
+description: SvelteFire StorageList Component API reference
+layout: ../../layouts/MainLayout.astro
+---
+
+# StorageList
+
+Returns a list of files stored in Firebase Storage.
+
+### Props
+
+- `ref` - A Firebase Storage reference or path string (e.g. `files/hi-mom.txt`)
+
+### Slots
+
+- `default` - Shown when the list is available
+- `loading` - Shown while the list is loading
+
+### Slot Props
+
+- `list` - The list of files and prefixes
+- `ref` - Storage reference
+- `storage` - The Firestore instance
+
+### Example
+
+```svelte
+<script>
+  import  { StorageList } from "sveltefire";
+</script>
+
+
+<StorageList ref="images/uid" 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>
+```

docs/src/pages/storage/upload-task.md

@@ -0,0 +1,58 @@
+---
+title: UploadTask Component
+pubDate: 2023-07-23
+description: SvelteFire UploadTask Component API reference
+layout: ../../layouts/MainLayout.astro
+---
+
+# UploadTask
+
+Uploads a file to a Firebase storage bucket. 
+
+### Props
+
+- `ref` - A Firebase Storage reference or path string (e.g. `files/hi-mom.txt`)
+- `data` - the file data to be uploaded as `Blob | Uint8Array | ArrayBuffer`
+- `metadata` - (optional) file metadata
+
+
+### Slots
+
+- `default` 
+
+### Slot Props
+
+- `snapshot` - Firebase UploadTaskSnapshot
+- `task` - Firebase UploadTask
+- `progress` - Number as a percentage of the upload progress
+- `storage` - The Firestore instance
+
+### Example
+
+```svelte
+<script>
+  import  { DownloadURL, UploadTask } from "sveltefire";
+
+  let file;
+
+  function chooseFile(e) {
+    file = e.target.files[0];
+  }
+</script>
+
+<input type="file" on:change={chooseFile} />
+
+{#if file}
+  <UploadTask ref="myFile.txt" data={file} 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>Link</a>
+      </DownloadURL>
+    {/if}
+  </UploadTask>
+{/if}
+```

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sveltefire",
-	"version": "0.4.1",
+	"version": "0.4.2",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",

src/lib/components/UploadTask.svelte

@@ -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/index.js

@@ -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/stores/sdk.ts

@@ -1,4 +1,3 @@
-import { writable } from "svelte/store";
 import type { Firestore } from "firebase/firestore";
 import type { Auth } from "firebase/auth";
 import { getContext, setContext } from "svelte";