Notes

Firebase Storage

Create a ref

1
var storageRef = firebase.storage().ref();
2
const fileRef = storageRef.child('/some/file/path.jpg);
Copied!
1
// Points to the root reference
2
var storageRef = firebase.storage().ref();
3
4
// Points to 'images'
5
var imagesRef = storageRef.child('images');
6
7
// Points to 'images/space.jpg'
8
// Note that you can use variables to create child values
9
var fileName = 'space.jpg';
10
var spaceRef = imagesRef.child(fileName);
11
12
// File path is 'images/space.jpg'
13
var path = spaceRef.fullPath;
14
15
// File name is 'space.jpg'
16
var name = spaceRef.name;
17
18
// Points to 'images'
19
var imagesRef = spaceRef.parent;
Copied!

Upload file

1
// Create file metadata including the content type
2
var metadata = {
3
contentType: 'image/jpeg',
4
};
5
6
// Upload the file and metadata
7
var uploadTask = storageRef.child('images/mountains.jpg').put(file, metadata);
Copied!

Full example

1
function uploadFile(file) {
2
// Create the file metadata
3
var metadata = {
4
contentType: 'image/jpeg',
5
};
6
7
// Upload file and metadata to the object 'images/mountains.jpg'
8
var uploadTask = storageRef.child('images/' + file.name).put(file, metadata);
9
10
// Listen for state changes, errors, and completion of the upload.
11
uploadTask.on(
12
firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
13
function(snapshot) {
14
// Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
15
var progress = snapshot.bytesTransferred / snapshot.totalBytes * 100;
16
console.log('Upload is ' + progress + '% done');
17
switch (snapshot.state) {
18
case firebase.storage.TaskState.PAUSED: // or 'paused'
19
console.log('Upload is paused');
20
break;
21
case firebase.storage.TaskState.RUNNING: // or 'running'
22
console.log('Upload is running');
23
break;
24
}
25
},
26
function(error) {
27
// Errors list: https://firebase.google.com/docs/storage/web/handle-errors
28
switch (error.code) {
29
case 'storage/unauthorized':
30
// User doesn't have permission to access the object
31
break;
32
33
case 'storage/canceled':
34
// User canceled the upload
35
break;
36
37
case 'storage/unknown':
38
// Unknown error occurred, inspect error.serverResponse
39
break;
40
}
41
},
42
function() {
43
// Upload completed successfully, now we can get the download URL
44
var downloadURL = uploadTask.snapshot.downloadURL;
45
}
46
);
47
}
Copied!

Download file

1
// Create a reference to the file we want to download
2
var starsRef = storageRef.child('images/stars.jpg');
3
4
// Get the download URL
5
starsRef.getDownloadURL().then(function(url) {
6
// Insert url into an <img> tag to "download"
7
}).catch(function(error) {
8
9
// A full list of error codes is available at
10
// https://firebase.google.com/docs/storage/web/handle-errors
11
switch (error.code) {
12
case 'storage/object_not_found':
13
// File doesn't exist
14
break;
15
16
case 'storage/unauthorized':
17
// User doesn't have permission to access the object
18
break;
19
20
case 'storage/canceled':
21
// User canceled the upload
22
break;
23
24
...
25
26
case 'storage/unknown':
27
// Unknown error occurred, inspect the server response
28
break;
29
}
30
});
Copied!

Set metadata

1
// Create a reference to the file whose metadata we want to change
2
var forestRef = storageRef.child('images/forest.jpg');
3
4
// Create file metadata to update
5
var newMetadata = {
6
cacheControl: 'public,max-age=300',
7
contentType: 'image/jpeg',
8
contentLanguage: null,
9
customMetadata: {
10
whatever: 'we feel like',
11
},
12
};
13
14
// Update metadata properties
15
forestRef
16
.updateMetadata(newMetadata)
17
.then(function(metadata) {
18
// Updated metadata for 'images/forest.jpg' is returned in the Promise
19
})
20
.catch(function(error) {
21
// Uh-oh, an error occurred!
22
});
Copied!
Last modified 3yr ago