I have several file type inputs to upload images like this:

Field name="dni_front_image" component={UploadFile} type="file" id="uploadFront" onChange={handleFrontPreviewImage}

When a new photo is uploaded, there is an 'onChange' event to be able to preview the image before uploading it. This event is defined as follows:

handleBackPreviewImage(e) {
e.preventDefault();

let reader = new FileReader();
let file = e.target.files[0];

if (file && file.type.match('image.*')) {
reader.readAsDataURL(file);
}

reader.onloadend = () => {
this.setState({
imageBackPreviewUrl: reader.result,
backFile: file
});
}


}

Then when uploading the image on an ANDROID mobile, it returns an error like this:


app.bundle.js?v=7:52242 Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
at RegisterExtraBase.handleBackPreviewImage (app.bundle.js?v=7:52242)
at ConnectedField.handleChange (app.bundle.js?v=7:39886)
at Object.executeOnChange (app.bundle.js?v=7:14654)
at ReactDOMComponent._handleChange (app.bundle.js?v=7:14471)
at Object.ReactErrorUtils.invokeGuardedCallback (app.bundle.js?v=7:6928)
at executeDispatch (app.bundle.js?v=7:6713)
at Object.executeDispatchesInOrder (app.bundle.js?v=7:6736)
at executeDispatchesAndRelease (app.bundle.js?v=7:6134)
at executeDispatchesAndReleaseTopLevel (app.bundle.js?v=7:6145)
at Array.forEach ()

This error only happens when the photo is made through the camera of the mobile device, if it is done from the gallery it works correctly.

Any idea of the problem?