You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/guide/storage.md
+8-8Lines changed: 8 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# Firebase Storage
2
2
3
-
[Firebase Storage](https://firebase.google.com/docs/storage/web/start) is a cloud storage service for Firebase. It allows you to store and serve user-generated content like images, audio, video, and other files. While most of the APIs can be used as you would normally do with Firebase, VueFire exposes a few composables to integrate better with Vue that not only give you access to reactive variables but also to some actions like `upload()`to update a file while keeping the reactive variable up to date at the same time.
3
+
[Firebase Storage](https://firebase.google.com/docs/storage/web/start) is a cloud storage service for Firebase. It allows you to store and serve user-generated content like images, audio, video, and other files. While most of the APIs can be used as you would normally do with Firebase, VueFire exposes a few composables to integrate better with Vue. These not only give you access to reactive variables, but also to some actions like `upload()`which updates a file while also keeping the reactive variable up to date.
4
4
5
5
## Installation
6
6
@@ -10,9 +10,9 @@ You can access the Firebase Storage from within any component with the composabl
10
10
11
11
## Uploading Files
12
12
13
-
You can upload and monitor the progress of a file upload with the `useStorageFile()` composable. This also exposes the URL of the file once it's uploaded and its metadata, let's start with a full example of a form upload:
13
+
To upload and monitor the upload progress of a file, use the `useStorageFile()` composable. This will expose the URL and metadata of the file once it's uploaded. Here's a full example of a form upload:
14
14
15
-
```vue{4,?}
15
+
```vue{5,18}
16
16
<script setup lang="ts">
17
17
// See https://vueuse.org/core/useFileDialog
18
18
import { useFileDialog } from '@vueuse/core'
@@ -73,9 +73,9 @@ Once the picture is uploaded, you can use the `url` reactive variable. For examp
73
73
74
74
## Downloading Files
75
75
76
-
VueFire also exposes a smaller composable that only retrieves the url of a file. This is useful if you don't need to upload a file but only display it:
76
+
To get the download URL for a file, use the `useStorageFileUrl()` composable. This is useful if you only need to display a file:
77
77
78
-
```vue{4,?}
78
+
```vue{3,11}
79
79
<script setup lang="ts">
80
80
import { ref as storageRef } from 'firebase/storage'
81
81
import { useFirebaseStorage, useStorageFileUrl } from 'vuefire'
@@ -92,12 +92,12 @@ const {
92
92
93
93
## File metadata
94
94
95
-
The same way you can access the file URL you can also access the file metadata. You can also use the `update()` function to update the metadata and keep the reactive variable up to date:
95
+
To access the file metadata, use the `useStorageFileMetadata()` composable. You can use the `update()` function to keep the metadata and reactive variable up to date:
96
96
97
-
```vue{4,?}
97
+
```vue{3,13}
98
98
<script setup lang="ts">
99
99
import { ref as storageRef } from 'firebase/storage'
100
-
import { useFirebaseStorage, useStorageFile } from 'vuefire'
100
+
import { useFirebaseStorage, useStorageFileMetadata } from 'vuefire'
0 commit comments