voluptasmollitia/docs-exp/storage.uploadtask.on.md

Monorepo for the Firebase JavaScript SDK

<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [@firebase/storage](./storage.md) &gt; [UploadTask](./storage.uploadtask.md) &gt; [on](./storage.uploadtask.on.md)

## 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 <em>or</em> 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.

<b>Signature:</b>

```typescript
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](./storage.taskevent.md) | The type of event to listen for. |
|  nextOrObserver | [StorageObserver](./storage.storageobserver.md)<!-- -->&lt;[UploadTaskSnapshot](./storage.uploadtasksnapshot.md)<!-- -->&gt; \| null \| ((snapshot: [UploadTaskSnapshot](./storage.uploadtasksnapshot.md)<!-- -->) =&gt; unknown) | The <code>next</code> function, which gets called for each item in the event stream, or an observer object with some or all of these three properties (<code>next</code>, <code>error</code>, <code>complete</code>). |
|  error | ((a: [FirebaseStorageError](./storage.firebasestorageerror.md)<!-- -->) =&gt; unknown) \| null | A function that gets called with a <code>FirebaseStorageError</code> if the event stream ends due to an error. |
|  complete | Unsubscribe \| null |  |

<b>Returns:</b>

Unsubscribe \| Subscribe&lt;[UploadTaskSnapshot](./storage.uploadtasksnapshot.md)<!-- -->&gt;

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.\*\*

```javascript
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.\*\*

```javascript
// 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.\*\*

```javascript
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();
});

```