Cloud Storage allows you to manage the file uploads; you can resume, pause, or cancel the upload. The corresponding methods are available on UploadTask, which is returned by the put() or putString() methods that can be used as a promise or use to manage and monitor the status of the upload:

// Upload the file and metadata
var uploadTask = storageRef.child('folder/file.jpg').put(file);

// Pause the upload - state changes to pause
uploadTask.pause();

// Resume the upload - state changes to running
uploadTask.resume();

// Cancel the upload - returns an error indicating file upload is cancelled
uploadTask.cancel();

You can use the 'state_change' observer to listen to the progress events. It is very useful if you want to show some real-time progress bar for your file uploading:

When an event occurs, a TaskSnapshot object will be passed back, which can be used to view the task at the time of event occurrence.

The object is passed back. It contains the following properties:

When you upload a file, there are chances that some error occurs. You can handle the error using the error object you get in callback.

The following code snippet shows example code to manage the file upload and error handling:

// File
var file = this.state.snapshot;

// Create the file metadata
var metadata = {
  contentType: 'image/jpeg'
};

// Upload file and metadata to the object 'images/mountains.jpg'
var uploadTask = storageRef.child('ticket_snapshots/' + file.name).put(file, metadata);

// Listen for state changes, errors, and completion of the upload.
uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
  function(snapshot) {
    // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
    var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    console.log('Upload is ' + progress + '% done');
    switch (snapshot.state) {
      case firebase.storage.TaskState.PAUSED: // or 'paused'
        console.log('Upload is paused');
        break;
      case firebase.storage.TaskState.RUNNING: // or 'running'
        console.log('Upload is running');
        break;
    }
  }, function(error) {

  // A full list of error codes is available at
  // https://firebase.google.com/docs/storage/web/handle-errors
  switch (error.code) {
    case 'storage/unauthorized':
      // User doesn't have permission to access the object
      break;

    case 'storage/canceled':
      // User canceled the upload
      break;

    case 'storage/unknown':
      // Unknown error occurred, inspect error.serverResponse
      break;
  }
}, function() {
  // Upload completed successfully, now we can get the download URL
  var downloadURL = uploadTask.snapshot.downloadURL;
});

Now, let's move to the download file section.