title: How To Fix Invalid argument in `put` at index 0: Expected Blob or File when using React, Firebase and Filepond
body: <p>I'm trying to upload a users avatar when creting a firebase user, After creating a user here</p>
  
  <pre><code>auth.createUserWithEmailAndPassword(this.state.email,this.state.password)
      .then(credential=&gt;{
       const photoUrl = this.handleUpload(credential)
  })
  </code></pre>
  
  <p>I create a handle upload function which returns a photoUrl below</p>
  
  <pre><code>handleUpload=(credential)=&gt;{
      const {avatar} = this.state;
      const upload = storage.ref(`avatars/${credential.user.uid}`).put(avatar)
      upload.on('state_changed',(snapshot)=&gt;{
        let progress = (snapshot.bytesTransferred/snapshot.totalBytes)*100;
        console.log('Upload is ' + progress + '% done');
      },(e)=&gt;{
        console.log(e)
      },()=&gt;{
        return storage.ref("avatars").child(`${credential.user.uid}`).getDownloadURL()
      })
    }
  </code></pre>
  
  <p>and the filepond UI instance is declared in the UI as follows</p>
  
  <pre><code>const { ....,avatar,....} = this.state;
  
  &lt;FilePond 
    ref={ref =&gt; this.pond = ref}
    files={avatar}
    fileValidateTypeLabelExpectedTypes="Invalid File Type"
    imagePreviewMaxFileSize='3MB'
    imageValidateSizeMinWidth="400"
    imageValidateSizeMaxWidth="1024"            
    imageValidateSizeMinHeight="400"
    imageValidateSizeMaxHeight="1024"
    imagePreviewTransparencyIndicator="green"
    maxFileSize='3MB'
    labelIdle={'Drag &amp; Drop your Profile Picture or &lt;span class="filepond--label-action"&gt; Browse &lt;/span&gt;'}
    acceptedFileTypes={['image/png', 'image/jpeg']}
    onupdatefiles={fileItems =&gt; {
      this.setState({
        avatar: fileItems.map(fileItem =&gt; fileItem.file)
      });
    }}              
  /&gt;
  </code></pre>
  
  <p>But I get the expected blob or file error...
  How can I fix this?</p>