FileReader error parameter 1 is not of type 'Blob'

Question

I've got a problem with a javascript Filereader which returns the error Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'. one in two. Sometimes it works, but when i repeat the operation, it fails.

HTML CODE:

 <div className="draggable-container">
      <input
      type="file"
      id="file-browser-input"
      name="file-browser-input"
      ref={input => this.fileInput = input}
      onDragOver={(e) => {
      e.preventDefault();
      e.stopPropagation();
      }}
      onDrop={this
      .onFileLoad
      .bind(this)}
      onChange={this
      .onFileLoad
      .bind(this)}/>

JavaScript Code:

 onFileLoad(e){
const file = e.target.files[0];
let fileReader = new FileReader()
fileReader.onload = () =>{
  console.log('IMAGE LOADED : ', fileReader.result)
  const files = {
    name: file.name,
    size: file.size,
    type: file.type,
    data: fileReader.result,
    isUploading: false
  }

  this.addLoadedFile(files);
}

fileReader.onabort = () =>{
  alert('reading aborted');
}

fileReader.onerror = () =>{
  alert('reading ERROR');
}


-> Error -> fileReader.readAsDataURL(e.target.files[0]);

}

Solution

The drop event contains the files in the DataTransfer object. So, instead of

const file = e.target.files[0]

you'll need to do:

const file = e.target.files[0] || e.dataTransfer.files[0]

to handle both events.

That's probably why some of attempts worked, and some didn't - you've just uploaded the file by 2 different ways and only one was working.

Comments

[JM-AGMS]

Well, you can avoid the error by simply checking if e.target.files is defined. if (e.target.files && e.target.files[0]) {fileReader.readAsDataURL(e.target.files[0]);}