Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Commit 822a10c

Browse files
davidstackioposva
andauthored
docs: add missing import to example (#1637)
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com>
1 parent ed3d5d8 commit 822a10c

File tree

1 file changed

+9
-11
lines changed

1 file changed

+9
-11
lines changed

‎docs/guide/storage.md‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Firebase Storage
22

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.
44

55
## Installation
66

@@ -10,9 +10,9 @@ You can access the Firebase Storage from within any component with the composabl
1010

1111
## Uploading Files
1212

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:
1414

15-
```vue
15+
```vue{5,18}
1616
<script setup lang="ts">
1717
// See https://vueuse.org/core/useFileDialog
1818
import { useFileDialog } from '@vueuse/core'
@@ -73,13 +73,12 @@ Once the picture is uploaded, you can use the `url` reactive variable. For examp
7373

7474
## Downloading Files
7575

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:
7777

78-
```vue
78+
```vue{3,11}
7979
<script setup lang="ts">
80-
import { useFileDialog } from '@vueuse/core'
8180
import { ref as storageRef } from 'firebase/storage'
82-
import { useFirebaseStorage, useStorageFile } from 'vuefire'
81+
import { useFirebaseStorage, useStorageFileUrl } from 'vuefire'
8382
8483
const storage = useFirebaseStorage()
8584
const mountainFileRef = storageRef(storage, 'images/mountains.jpg')
@@ -93,13 +92,12 @@ const {
9392

9493
## File metadata
9594

96-
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 **only**access the file metadata, use the `useStorageFileMetadata()` composable. You can use the `update()` function to keep the metadata and reactive variable up to date:
9796

98-
```vue
97+
```vue{3,13}
9998
<script setup lang="ts">
100-
import { useFileDialog } from '@vueuse/core'
10199
import { ref as storageRef } from 'firebase/storage'
102-
import { useFirebaseStorage, useStorageFile } from 'vuefire'
100+
import { useFirebaseStorage, useStorageFileMetadata } from 'vuefire'
103101
104102
const storage = useFirebaseStorage()
105103
const mountainFileRef = storageRef(storage, 'images/mountains.jpg')

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /