Reactで画像ファイルを取り扱いたい

前提・実現したいこと

サイトで選択した画像ファイルをIPFSを用いて保存したいです。

発生している問題・エラーメッセージ

Unhandled Rejection (TypeError): Cannot read property '0' of null

該当のソースコード

jsx(html)
1<div id="file">
2<p>画像ファイルをアップロードしてください</p>
3<input type="file" id="file" name="file"/>
4<input className="btn btn-primary" type="submit" name="submit" value=" アップロード" onClick={this.loadFile}/>
5</div>

jsx(script)
1loadFile = async (event) => {
2    event.preventDefault();
3    const file = event.target.files[0];
4    console.log(file);
5  }

試したこと

event.target[0].files[0]など試しましたが変わりませんでした。

補足情報（FW/ツールのバージョンなど）

理想は以下のようにipfsを用いて画像をアップロードしたい感じです。

  loadFile(e) {
    event.preventDefault()
    const file = e.target.files[0];
    const reader = new FileReader();
    var self = this;
    //reader.readAsArrayBuffer(file);
    reader.onloadend = function(e){
      var buffer = Buffer(reader.result);
      ipfs.files.add(buffer, function(err, result){
      var ipfsHash = result[0].hash;
      var url = "https://ipfs.io/ipfs/" + ipfsHash;
      self.url = url;
      self.ipfsHash = ipfsHash;
      console.log(url);
      })
    },
    reader.readAsArrayBuffer(file);
  },