Triggering Cordova Camera Plugin w/ Reactjs - reactjs

Question

I am trying to trigger the cordova camera plugin from inside reactjs. In previous iterations It was utilizing a simple HTML5 file input.
Upon further research I discovered that that the current webview that cordova uses for android platforms does not provide an option for camera control (thus the native cordova plugin).
I am trying to trigger the cordova camera plugin from inside reactjs after being built with:
npm run build
then the contents of the app's build directory are coppied to cordovas 'www' directory.
The Cordova app is relatively vanilla and camera plugin added with the command.
cordova plugin add cordova-plugin-camera
Here is the config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>HelloCordova</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<plugin name="cordova-plugin-console" spec="^1.1.0" />
<plugin name="cordova-plugin-camera" spec="^4.0.3" />
<plugin name="cordova-plugin-media-capture" spec="^3.0.2" />
<engine name="android" spec="^7.1.4" />
</widget>
The React Component is as follows
import React, { Component } from "react";
import { Alert } from "reactstrap";
import "../../Containers/containers.css";
import { connect } from "react-redux";
import userTools from "../../Services/userTools";
class Avatar extends Component {
constructor() {
super();
this.state = {
avatar: "https://denisol.se/wp-content/uploads/2018/05/empty-avatar.jpg"
};
}
takepicture() {
if (!window.cordova) {
var Camera;
//Unless theres another way to suppress webpack
//During Build
}
navigator.camera.getPicture(
file => this.readFiles(file),
err => console.log(err),
{
quality: 50,
destinationType: Camera.DestinationType.FILE_URI
}
);
}
readFiles(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.addEventListener(
"load",
() => {
console.log(reader.result);
this.setState({
avatar: reader.result
});
},
false
);
}
render() {
var avatarurl;
if (this.props.myinfo && this.props.myinfo.avatar.avatar.url) {
avatarurl = this.props.myinfo.avatar.url;
} else {
avatarurl =
"https://denisol.se/wp-content/uploads/2018/05/empty-avatar.jpg";
}
if (this.props.new) {
avatarurl = this.state.avatar;
}
return (
<div>
<img
id="avatar"
alt="test"
src={avatarurl}
onClick={() => {
if (this.props.updatable || this.props.new) {
this.takepicture();
//As for normal html input you would do the following
this.refs.fileUploader.click();
}
}}
/>
<input
type="file"
name="avatar"
ref="fileUploader"
style={{ display: "none" }}
accept="image/*;capture=camera"
capture
onChange={e => {
if (e.target.files.length && this.props.updatable) {
userTools.updateAvatar(e.target.files[0]);
} else if (e.target.files.length && this.props.new) {
this.readFiles(e.target.files[0]);
this.props.newAvatar(e.target.files[0]);
}
}}
/>
</div>
);
}
}
function mapStateToProps(state) {
return { myinfo: state.myinfoReducer };
}
export default connect(mapStateToProps)(Avatar);
when i execute the function there seems to be no response from cordova (permissions request, camera opening, ect...). Note that this component is only part of a larger react project where everything else is working more or less as expected.
Any Help is greatly appreciated thanks.

Answer 1

i made this sample repo to study the problem and it seems to be recovering the image correctly.
By doing this and reading the event handling docs, a possible cause could be the lack of bind() on handlers since this is a class component.
Please see the repo and i really rope it helps.

Answer 2

I was able to get the camera functionality working by migrating my react project over to browserify. Not the simplest solution but will work for the time being thanks for that tip.