Home > @firebase/storage > UploadTask > on

UploadTask.on() method

Listens for events on this task.

Events have three callback functions (referred to as next, error, and complete).

If only the event is passed, a function that can be used to register the callbacks is returned. Otherwise, the callbacks are passed after the event.

Callbacks can be passed either as three separate arguments or as the next, error, and complete properties of an object. Any of the three callbacks is optional, as long as at least one is specified. In addition, when you add your callbacks, you get a function back. You can call this function to unregister the associated callbacks.

Signature:

on(event: TaskEvent, nextOrObserver?: StorageObserver<UploadTaskSnapshot> | null | ((snapshot: UploadTaskSnapshot) => unknown), error?: ((a: FirebaseStorageError) => unknown) | null, complete?: Unsubscribe | null): Unsubscribe | Subscribe<UploadTaskSnapshot>;

Parameters

Parameter	Type	Description
event	TaskEvent	The type of event to listen for.
nextOrObserver	StorageObserver<UploadTaskSnapshot> | null | ((snapshot: UploadTaskSnapshot) => unknown)	The next function, which gets called for each item in the event stream, or an observer object with some or all of these three properties (next, error, complete).
error	((a: FirebaseStorageError) => unknown) | null	A function that gets called with a FirebaseStorageError if the event stream ends due to an error.
complete	Unsubscribe | null

Returns:

Unsubscribe | Subscribe<UploadTaskSnapshot>

If only the event argument is passed, returns a function you can use to add callbacks (see the examples above). If more than just the event argument is passed, returns a function you can call to unregister the callbacks.

Example 1

**Pass callbacks separately or in an object.**

var next = function(snapshot) {};
var error = function(error) {};
var complete = function() {};

// The first example.
uploadTask.on(
    firebase.storage.TaskEvent.STATE_CHANGED,
    next,
    error,
    complete);

// This is equivalent to the first example.
uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, {
  'next': next,
  'error': error,
  'complete': complete
});

// This is equivalent to the first example.
var subscribe = uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED);
subscribe(next, error, complete);

// This is equivalent to the first example.
var subscribe = uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED);
subscribe({
  'next': next,
  'error': error,
  'complete': complete
});

Example 2

**Any callback is optional.**

// Just listening for completion, this is legal.
uploadTask.on(
    firebase.storage.TaskEvent.STATE_CHANGED,
    null,
    null,
    function() {
      console.log('upload complete!');
    });

// Just listening for progress/state changes, this is legal.
uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, function(snapshot) {
  var percent = snapshot.bytesTransferred / snapshot.totalBytes * 100;
  console.log(percent + "% done");
});

// This is also legal.
uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, {
  'complete': function() {
    console.log('upload complete!');
  }
});

Example 3

**Use the returned function to remove callbacks.**

var unsubscribe = uploadTask.on(
    firebase.storage.TaskEvent.STATE_CHANGED,
    function(snapshot) {
      var percent = snapshot.bytesTransferred / snapshot.totalBytes * 100;
      console.log(percent + "% done");
      // Stop after receiving one update.
      unsubscribe();
    });

// This code is equivalent to the above.
var handle = uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED);
unsubscribe = handle(function(snapshot) {
  var percent = snapshot.bytesTransferred / snapshot.totalBytes * 100;
  console.log(percent + "% done");
  // Stop after receiving one update.
  unsubscribe();
});