Filepicker IO APIを使用して、ユーザーが画像をアップロードできるようにしようとしています。「はじめに」のビデオに示されている手順を複製しようとしていますが、障害が発生しています。Filepickerは正常に開きますが、divにあるjavascript関数(openFilePicker())を呼び出していないようです(filepicker設定がdivで設定されている場合は、機能します)。また、画像をアップロードした後、別のページに表示できるように(phpなどで保存するために)情報を取得する方法がわかりません。ご協力いただければ幸いです。コードは次のとおりです。
<script type="text/javascript">
function openFilePicker() {
filepicker.setKey('MYKEYHERE');
filepicker.pick({
mimetypes: ['image/*', 'text/plain'],
container: 'window',
services:['COMPUTER', 'FACEBOOK', 'GMAIL', 'PICASA', 'DROPBOX', 'INSTAGRAM', 'FLICKR'],
},
function(FPFile){
console.log(JSON.stringify(FPFile));
//UPLOAD COMPLETE
UpdateHTMLWithUploadedFile(FPFile.url);
},
function(FPError){
console.log(FPError.toString());
}
);
}
</script>
<script type="text/javascript" src="//api.filepicker.io/v1/filepicker.js"></script>
<div class="row margin" id='img-row'>
<input id="filename" disabled="disabled" class="input-text file-input-value" type="text" style="width: 360px;" value=""/>
<input name="img" data-fp-class="form-simple-action-btn filepicker_launcher" data-fp-button-text="Choose Image" data-fp-container="modal" type="filepicker" data-fp-apikey="MYKEYHERE" id='campaign-img-input' onclick="javascript:openFilePicker()">
</div>