Skip to content

Commit 3732913

Browse files
codediodeiocodediodeio
authored
Merge pull request codediodeio#118 from codediodeio/upload-task
Upload task
2 parents 64a3cd2 + b515868 commit 3732913

File tree

14 files changed

+363
-71
lines changed

14 files changed

+363
-71
lines changed

Diff for: ‎README.md

+24-7
Original file line numberDiff line numberDiff line change
@@ -279,14 +279,14 @@ Collections can also take a Firestore Query instead of a path:
279279
</Collection>
280280
```
281281

282-
### DownloadLink
282+
### DownloadURL
283283

284-
DownloadLink provides a `link` to download a file from Firebase Storage and its `reference`.
284+
DownloadURL provides a `link` to download a file from Firebase Storage and its `reference`.
285285

286286
```svelte
287-
<DownloadLink ref={item} let:link let:ref>
288-
<a href="{link}" download>Download {ref?.name}</a>
289-
</DownloadLink>
287+
<DownloadURL ref={item} let:link let:ref>
288+
<a href={link} download>Download {ref?.name}</a>
289+
</DownloadURL>
290290
```
291291

292292
### StorageList
@@ -318,9 +318,26 @@ StorageList provides a list of `items` and `prefixes` corresponding to the list
318318
</StorageList>
319319
```
320320

321-
You can combine
321+
### UploadTask
322322

323-
### Using Components Together
323+
Upload a file with progress tracking
324+
325+
```svelte
326+
<UploadTask ref="filename.txt" data={someBlob} let:progress let:snapshot>
327+
{#if snapshot?.state === "running"}
328+
{progress}% uploaded
329+
{/if}
330+
331+
{#if snapshot?.state === "success"}
332+
<DownloadURL ref={snapshot?.ref} let:link>
333+
<a href={link} download>Download</a>
334+
</DownloadURL>
335+
{/if}
336+
</UploadTask>
337+
```
338+
339+
340+
## Using Components Together
324341

325342
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.
326343

Diff for: ‎docs/src/components/SideNav.astro

+3-3
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@
1818
<li><a href="/firestore/doc-component">&ltDoc&gt</a></li>
1919
<li><a href="/firestore/collection-component">&ltCollection&gt</a></li>
2020
<li class="heading">storage</li>
21-
<li><a href="/guide/todo">uploadTaskStore</a></li>
22-
<li><a href="/guide/todo">&ltFileUploader&gt</a></li>
23-
<li><a href="/guide/todo">&ltDownloadURL&gt</a></li>
21+
<li><a href="/storage/upload-task">&ltUploadTask&gt</a></li>
22+
<li><a href="/storage/download-url">&ltDownloadURL&gt</a></li>
23+
<li><a href="/storage/storage-list">&ltStorageList&gt</a></li>
2424
<li class="heading">analytics</li>
2525
<li><a href="/guide/todo">&ltPageView&gt</a></li>
2626
</ul>

Diff for: ‎docs/src/pages/_alt.astro

-34
This file was deleted.

Diff for: ‎docs/src/pages/storage/download-url.md

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
title: DownloadURL Component
3+
pubDate: 2023-07-23
4+
description: SvelteFire DownloadURL Component API reference
5+
layout: ../../layouts/MainLayout.astro
6+
---
7+
8+
# DownloadURL
9+
10+
Returns the download URL for a file in Firebase Storage.
11+
12+
### Props
13+
14+
- `ref` - A Firebase Storage reference or path string (e.g. `files/hi-mom.txt`)
15+
16+
### Slots
17+
18+
- `default` - Shown when the url is available
19+
- `loading` - Shown while the url is loading
20+
21+
### Slot Props
22+
23+
- `link` - The download URL
24+
- `ref` - Storage reference
25+
- `storage` - The Firestore instance
26+
27+
### Example
28+
29+
```svelte
30+
<script>
31+
import { DownloadURL } from "sveltefire";
32+
</script>
33+
34+
35+
<DownloadURL ref="images/pic.png" let:link let:ref>
36+
<!-- show img -->
37+
<img src={link} />
38+
39+
<!-- or download via link -->
40+
<a href={link} download>{ref?.name}</a>
41+
</DownloadURL>
42+
```

Diff for: ‎docs/src/pages/storage/storage-list.md

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
title: StorageList Component
3+
pubDate: 2023-07-23
4+
description: SvelteFire StorageList Component API reference
5+
layout: ../../layouts/MainLayout.astro
6+
---
7+
8+
# StorageList
9+
10+
Returns a list of files stored in Firebase Storage.
11+
12+
### Props
13+
14+
- `ref` - A Firebase Storage reference or path string (e.g. `files/hi-mom.txt`)
15+
16+
### Slots
17+
18+
- `default` - Shown when the list is available
19+
- `loading` - Shown while the list is loading
20+
21+
### Slot Props
22+
23+
- `list` - The list of files and prefixes
24+
- `ref` - Storage reference
25+
- `storage` - The Firestore instance
26+
27+
### Example
28+
29+
```svelte
30+
<script>
31+
import { StorageList } from "sveltefire";
32+
</script>
33+
34+
35+
<StorageList ref="images/uid" let:list>
36+
<ul>
37+
{#if list === null}
38+
<li>Loading...</li>
39+
{:else if list.prefixes.length === 0 && list.items.length === 0}
40+
<li>Empty</li>
41+
{:else}
42+
<!-- Listing the prefixes -->
43+
{#each list.prefixes as prefix}
44+
<li>
45+
{prefix.name}
46+
</li>
47+
{/each}
48+
<!-- Listing the objects in the given folder -->
49+
{#each list.items as item}
50+
<li>
51+
{item.name}
52+
</li>
53+
{/each}
54+
{/if}
55+
</ul>
56+
</StorageList>
57+
```

Diff for: ‎docs/src/pages/storage/upload-task.md

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
---
2+
title: UploadTask Component
3+
pubDate: 2023-07-23
4+
description: SvelteFire UploadTask Component API reference
5+
layout: ../../layouts/MainLayout.astro
6+
---
7+
8+
# UploadTask
9+
10+
Uploads a file to a Firebase storage bucket.
11+
12+
### Props
13+
14+
- `ref` - A Firebase Storage reference or path string (e.g. `files/hi-mom.txt`)
15+
- `data` - the file data to be uploaded as `Blob | Uint8Array | ArrayBuffer`
16+
- `metadata` - (optional) file metadata
17+
18+
19+
### Slots
20+
21+
- `default`
22+
23+
### Slot Props
24+
25+
- `snapshot` - Firebase UploadTaskSnapshot
26+
- `task` - Firebase UploadTask
27+
- `progress` - Number as a percentage of the upload progress
28+
- `storage` - The Firestore instance
29+
30+
### Example
31+
32+
```svelte
33+
<script>
34+
import { DownloadURL, UploadTask } from "sveltefire";
35+
36+
let file;
37+
38+
function chooseFile(e) {
39+
file = e.target.files[0];
40+
}
41+
</script>
42+
43+
<input type="file" on:change={chooseFile} />
44+
45+
{#if file}
46+
<UploadTask ref="myFile.txt" data={file} let:progress let:snapshot>
47+
{#if snapshot?.state === "running"}
48+
{progress}% uploaded
49+
{/if}
50+
51+
{#if snapshot?.state === "success"}
52+
<DownloadURL ref={snapshot?.ref} let:link>
53+
<a href={link} download>Link</a>
54+
</DownloadURL>
55+
{/if}
56+
</UploadTask>
57+
{/if}
58+
```

Diff for: ‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "sveltefire",
3-
"version": "0.4.1",
3+
"version": "0.4.2",
44
"scripts": {
55
"dev": "vite dev",
66
"build": "vite build && npm run package",

Diff for: ‎src/lib/components/DownloadLink.svelte renamed to ‎src/lib/components/DownloadURL.svelte

File renamed without changes.

Diff for: ‎src/lib/components/UploadTask.svelte

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<script lang="ts">
2+
import { uploadTaskStore } from "$lib/stores/storage.js";
3+
import { getFirebaseContext } from "$lib/stores/sdk.js";
4+
import type {
5+
FirebaseStorage,
6+
UploadTask,
7+
StorageReference,
8+
UploadMetadata,
9+
UploadTaskSnapshot,
10+
} from "firebase/storage";
11+
12+
export let ref: string | StorageReference;
13+
export let data: Blob | Uint8Array | ArrayBuffer;
14+
export let metadata: UploadMetadata | undefined = undefined;
15+
16+
const { storage } = getFirebaseContext();
17+
const upload = uploadTaskStore(storage!, ref, data, metadata);
18+
19+
interface $$Slots {
20+
default: {
21+
task: UploadTask | undefined;
22+
ref: StorageReference | null;
23+
snapshot: UploadTaskSnapshot | null;
24+
progress: number;
25+
storage?: FirebaseStorage;
26+
};
27+
}
28+
29+
$: progress = ($upload?.bytesTransferred! / $upload?.totalBytes!) * 100 ?? 0;
30+
</script>
31+
32+
{#if $upload !== undefined}
33+
<slot task={$upload?.task} snapshot={$upload} {progress} ref={upload.reference} {storage} />
34+
{/if}

Diff for: ‎src/lib/index.js

+12-2
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,29 @@ import Doc from './components/Doc.svelte';
55
import FirebaseApp from './components/FirebaseApp.svelte';
66
import SignedIn from './components/SignedIn.svelte';
77
import SignedOut from './components/SignedOut.svelte';
8+
import DownloadURL from './components/DownloadURL.svelte';
9+
import StorageList from './components/StorageList.svelte';
10+
import UploadTask from './components/UploadTask.svelte';
811
import { userStore } from './stores/auth.js';
912
import { docStore, collectionStore } from './stores/firestore.js';
1013
import { getFirebaseContext } from './stores/sdk.js';
11-
14+
import { downloadUrlStore, storageListStore, uploadTaskStore } from './stores/storage.js';
15+
1216
export {
1317
Doc,
1418
User,
1519
Collection,
1620
FirebaseApp,
1721
SignedOut,
1822
SignedIn,
23+
UploadTask,
24+
StorageList,
25+
DownloadURL,
26+
downloadUrlStore,
27+
storageListStore,
28+
uploadTaskStore,
1929
docStore,
2030
collectionStore,
2131
userStore,
22-
getFirebaseContext
32+
getFirebaseContext,
2333
}

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

-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { writable } from "svelte/store";
21
import type { Firestore } from "firebase/firestore";
32
import type { Auth } from "firebase/auth";
43
import { getContext, setContext } from "svelte";

0 commit comments

Comments
 (0)