コールバック関数でステートが更新出来ない。

Question

###前提・実現したいこと
monaca+OnsenUI+Reactで検証作業を行なっています。
その作業の内、カメラ機能を検証しています。

###発生している問題・エラーメッセージ
Cordovaプラグインでカメラ起動は出来たのですが、
撮影したjpgファイルのデータをReactのstateへ更新するのに失敗します。
getPicture関数内でCordovaプラグインのnavigator.camera.getPictureを使用し、
指定した成功時のコールバック関数(関数名：onSuccess)は正常に呼び出されるのですが、
その関数内でthis.setStateがなぜか認識されていないのが原因です。

エラーメッセージ

monacaのデバッガのApp Logだと、
'Error in Scucess callbasckId:Camera62XXXXXXX: '

###該当のソースコード
言語はReact.js ファイルはJsx

ここにご自身が実行したソースコードを書いてください
TestPage.jsx
/////////////////////////////////////////////
import React from 'react';
import ReactDOM from 'react-dom';
import {Toolbar, Page, Button} from 'react-onsenui';

export default class TestPage extends React.Component {

constructor(props) {
console.log("constructor");
super(props);
this.state = {
photoData: 'hoge.png' ,
}
}

onSuccess(imageData) {
console.log("onSuccess start-----");
// ※ 下のsetStateが認識されず、エラーになります。
this.setState({
photoData: 'data:image/jpeg;base64,' + imageData,
});
console.log("onSuccess end-----3");
}
onFail(message) {
alert("onFail");
}

// カメラ起動関数 成功時はonSuccess、失敗時はonFailが呼び出される。
getPicture() {
navigator.camera.getPicture(this.onSuccess, this.onFail, {
quality : 50,
destinationType: Camera.DestinationType.DATA_URI,
targetWidth: 100,
targetHeight: 100
});
}

render() {
return (
<Page>
<p style={{textAlign: 'center'}}>
<img src={this.state.photoData} style={{width: '70%'}} />
</p>
<p style={{textAlign: 'center'}}>
<i className="fa fa-camera fa-3x" aria-hidden="true" onClick={this.getPicture.bind(this)}></i>
</p>
</Page>
);
}
}

###試したこと
ログ出力を追加し、setState自体が認識されていないことを確認。
setState自体は正常に動くことを、別途ボタンで検証済み

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

Answer 1

解決出来ました。

monacaのサンプルHello Worldのプロジェクトのソースファイルより、以下の内容で修正すると、
正常に処理が出来ました。
ありがとうございます！

・Camera.DestinationType
Camera.DestinationType.DATA_URI → Camera.DestinationType.DATA_URLに変更

・Content-Security-Policy
CordovaVer6.5に更新されたので、以下の内容に修正
"default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"

Comments

[zohnam]

解決おめでとうございます。URI→URLとか、表記の揺れというか誤字レベルですねこれｗ

[toshi_7710]

ファイルの場合は、FILE_URIと指定していたので、切り替えにDATAに変更すればいいかと思ったので、
URIのままになっていました。
それにしてもサポートされていない形式なら、サポートされていないことを示すエラーメッセージぐらい出て欲しいなあと思うなあ。

Answer 2

<meta http-equiv=Content-Security-Policy content="default-src * data; img-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">

これがやっぱり気になりますね。

<meta http-equiv="Content-Security-Policy" content="default-src * data:; img-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">

こうしてみてください。Content-Security-Policyをダブルクォーテーションで囲んだ（これは念のためレベルです）のと、default-srcのところ、data:となってるべきところがdataだったので修正してみました。

Comments

[toshi_7710]

試してみましたが、動作は変わりませんでした。

「default-src * data:」→「default-src * data:;」に修正し、
Content-Security-Policyをダブルクォーテーションで囲んでmonacaのクラウドへアップロードを行うと、
なぜかダブルクォーテーションが無くなります。
アップロード後、直接、クラウドIDEでダブルクォーテーションを囲みましたが、動きは変わりませんでした。
　monacaデバッガにもエラーメッセージは表示されませんでした。

Answer 3

Content-Security-Policyでdata:は許可されていますか？

<meta http-equiv="Content-Security-Policy" content="default-src *; img-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">

こういう風に、img-srcのところにdata:があれば、imgタグでdata:は使っていいよということになります。

Comments

[toshi_7710]

Content-Security-Policyのimg-srcの「data:」が無かったので、追記しましたが、imgのsrcには反映されないままでした。
Content-Security-Policyは以下の内容になりました。
<meta http-equiv=Content-Security-Policy content="default-src * data; img-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
monacaのlocal kitで開発していますので、index.htmlへの上記の設定を反映させるため、
src/public/index.html.ejsにimgのdataの許可を追記しました。
その後、monacaのクラウドへアップロードし、monacaのクラウドIDEのindex.htmlの上記の設定が反映されて入ることを確認しました。

ソースファイルもES6の形式では無かったので、見直して以下、修正しました。

import React from 'react';
import ReactDOM from 'react-dom';
import {Toolbar, Page, Button} from 'react-onsenui';

export default class TestPage extends React.Component {

constructor(props) {
console.log("constructor");
super(props);

// バインド
this._selectAlbum = this._selectAlbum.bind(this);
this._getPicture = this._getPicture.bind(this);
this._onSuccess = this._onSuccess.bind(this);
this._onFail = this._onFail.bind(this);

this.state = {
stateKey1: 'initial value',
photoData: './sample/' + 'hoge.png' ,
}
}
_onSuccess(imageData) {
console.log("onSuccess-----Start");
this.setState({
photoData:'data:image/jpeg;base64,' + imageData,
//photoData: imageData,
});
console.log("onSuccess-----End");
}
_onFail(message) {
console.log("_onFail");
}

_getPicture() {
navigator.camera.getPicture(this._onSuccess, this._onFail, {
quality : 80,
destinationType: Camera.DestinationType.DATA_URI,
//destinationType: Camera.DestinationType.FILE_URI,
targetWidth: 100,
targetHeight: 100
});
}
_selectAlbum() {
navigator.camera.getPicture(this._onSuccess, this._onFail, {
quality : 80,
destinationType: Camera.DestinationType.DATA_URI,
//destinationType: Camera.DestinationType.FILE_URI,
targetWidth: 100,
targetHeight: 100,
sourceType: navigator.camera.PictureSourceType.SAVEDPHOTOALBUM
});
}

render() {

let hoge = "Shall We Test2-1";
console.log("render start");
console.log(this.props.name);

return (
<Page>
<div className="center">
<p style={{textAlign: 'center'}}>{hoge}</p>
<p style={{textAlign: 'center'}}>{this.props.name}</p>
</div>
<p style={{textAlign: 'center'}}>
<img src={this.state.photoData} style={{width: '45%'}} />
</p>
<div className="center">
<p style={{textAlign: 'center'}}>{this.state.photoData}</p>
</div>
<div className="center">
<p style={{textAlign: 'center'}}>{this.state.stateKey1}</p>
</div>
<p style={{textAlign: 'center'}}>
<i className="fa fa-picture-o fa-3x" aria-hidden="true" onClick={this._selectAlbum}>写真から選択</i>
<i className="fa fa-camera fa-3x" aria-hidden="true" onClick={this._getPicture}></i>
{console.log("render end")}
</p>
</Page>
);
}
}

見直したソースで、monacaクラウドにアップロードし、iPhoneの端末のmonacaデバッガで動作を確認すると、前回のエラーメッセージは出力されなくなり、正常に_onSuccessは終了したのですが、
imgタグに画像が表示されない状態になりました。

imgタグのdataとは関係ないですが、_getPicture、_onSuccessのCordovaのオプション引数を
Camera.DestinationType.FILE_URIに切り替えた場合は、前回も最初に質問した状態のステートが認識されないエラーメッセージが出ましたが、今回ES6に見直して修正したソースだと、
問題なく画像表示されるようになりました。