this is my app.js code going through a ipfs image uploader code along video by dapp university . facing this issue im new to blockchain i think there is a problem with this line of code const file = event.target.files[0]

  captureFile(event) {
    event.preventDefault()
    const file = event.target.files[0]
    const reader = new window.FileReader()
    reader.readAsArrayBuffer(file)
    reader.onloadend = () => {
      this.setState({ buffer: Buffer(reader.result) })
      console.log('buffer', this.state.buffer)
    }
  }

onSubmit(event){
  event.preventDefault()
  console.log("on submit......")
  ipfs.default.files.add(this.state.buffer,(err, result)=>{
    if(err){
      console.err("belp")
      return
    }
    
     this.setState({ipfshash:result[0].hash})
     console.log("ipfshash",this.state.ipfshash)
  }) //api installed accessed in header
}
  render() {
    if (!this.state.web3) {
      return <div>Loading Web3, accounts, and contract...</div>;
    }
    return (
      <div className="App">
        
        <h1>IPFS UPLOADER DAPP!</h1>
        <p>THIS IMAGE IS STORED IN IPFS.</p>
        <img src ="" alt=""/>
        <h2>upload image:</h2>
       <form onSubmit={this.onSubmit} >
<input type='file' onChange={this.captureFile}/>
<input type='submit'/>
</form>
        {/* <p>
          Try changing the value stored on <strong>line 42</strong> of App.js.
        </p>
        <div>The stored value is: {this.state.storageValue}</div> */}
      </div>
    );
  }
}

export default App;