title: Multiple Function Events/Callbacks?
body: <p>I'm trying to create a function that passes back the events from a Firebase upload function, and then show the progress in my UI</p>
  
  <p>I have a function, that handles the uploading of an image like so:</p>
  
  <pre><code>import firebase from '~/firebase';
  import hashSum from 'hash-sum';
  import events from 'events'
  
  async function uploadFile(image, design) {
    const eventEmitter = new events.EventEmitter();
      const hashId = hashSum(image.name + Date.now())
      const meta = {
        customMetadata: {
          namne: image.name
        }
      }
      const storageRef = firebase.storage().ref().child(`designs/${firebase.auth().currentUser.uid}/${design.id}/${hashId}.png`);
      const task = storageRef.put(image, meta);
      task.on('state_changed',
        (snapshot) =&gt; {
          const percentage = snapshot.bytesTransferred / snapshot.totalBytes * 100;
          eventEmitter.emit('progress', percentage)
          console.log(percentage)
        },
        (err) =&gt; {
          eventEmitter.emit('error', err)
        },
        () =&gt; {
          task.snapshot.ref.getDownloadURL().then(url =&gt; {
            eventEmitter.emit('done', {url, hashId})
          })
        }
      )
  }
  
  
  
  export { uploadFile }
  </code></pre>
  
  <p>And then in my UI I want to receive these events and do something with them:</p>
  
  <pre><code>const upload = await uploadFile(selectedFile, {id: this.props.match.params.id})
  upload.on('done', async (data) =&gt; {
    files.push({id: data.hashId ,name: selectedFile.name, url: data.url})
    await firebase.firestore().collection('designs').doc(firebase.auth().currentUser.uid).collection('designs').doc(this.props.match.params.id).update({
      files
    })
  })
  upload.on('error', (err) =&gt; {
    message.error(err)
  })
  upload.on('progress', (percent) =&gt; {
    this.setState({
      uploadProgress: percent
    })
  })
  </code></pre>
  
  <p>Now clearly I'm doing something wrong as <code>upload.on</code> is not a function.  Can anyone advise how to handle this, or if there is an easier way to return an already existing event?</p>