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]);
}
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.