Notes

Firebase Storage
See the Firebase Storage docs for web.
Create a ref
1
var storageRef = firebase.storage().ref();
2
const fileRef = storageRef.child('/some/file/path.jpg);
Copied!
Navigate
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!

Firebase Storage - Previous

Challenge

Next - Cloud Messaging

Introduction

Last modified 3yr ago

Copy link

Contents