reactjsアプリでuploadcareが定義されていません

Question

reactjsアプリケーションに画像を保存するためにuploadcareを使用しようとしています。しかし、私はそれを機能させることができません。私は、ドキュメントを踏襲しているが、私はエラー「キャッチされない例外TypeErrorを：Object.u.openDialog（：24 uploadcare.min.js）で未定義のプロパティ 『タブ』を読み取ることができません」取得しています。 npmにuploadcare-widgetをインストールし、それを私のファイルにインポートしても、動作しません。ここに関連するコードは次のとおりです。

まず私はこのようなindex.htmlの中にscriptタグを追加してい：

<script> 
    UPLOADCARE_PUBLIC_KEY = "demopublickey"; 
</script> 

はその後、私のコンポーネントで私はこれやってる：

import uploadcare from 'uploadcare-widget'; 

class ImageComponent extends React.Component { 
    componentDidMount() { 
    uploadcare.start({publicKey: 'demopublickey'}) 
    } 

    addImage(e) { 
    uploadcare.openDialog(null, { 
     imagesOnly: true, 
     multiple: false, 
    }).done((file) => { 
     file.promise().done((fileInfo) => { 
     console.log(fileInfo.cdn) 
     }) 
    }) 
    } 

    render() { 
    const imageInput = (
     <div className='image-box'> 
     <Button onClick={this.addImage}>Add Image</Button> 
     </div> 
    ) 

    return (
     <div> 
     { this.state.imgSrc && this.renderImageView() } 
     { !this.state.imgSrc && imageInput } 
     </div> 
    ) 
    } 
} 

を私はこれは非常に長い時間の間これに固執しています。助けてください！

Answer 1

。このバージョンでは、openDialogにエラーがあります。 the issue on githubに報告されています。

一時的な解決策：二番目のパラメータ（tab）を設定し、docsを参照して、第三のパラメータ（settings）のためtabsプロパティを追加し、

uploadcare.openDialog(null, 'file', { 
    tabs: 'all', 
    imagesOnly: true, 
    multiple: false, 
}).done((file) => { 
    file.promise().done((fileInfo) => { 
    console.log(fileInfo.cdn) 
    }) 
}) 

今日、私はこのバグの修正とウィジェットの新バージョンをリリースします。一時的な解決策を更新して削除することができます。

Answer 2

私はこのリポジトリhttps://github.com/uploadcare/uploadcare-widget-react-demoを信頼する場合は、[スタート機能でtabs:"all"を置く必要があります。ドキュメントに、ここで指定されているよう

uploadcare.start({ 
    publicKey: "demopublickey", 
    tabs: "all" 
}); 

Answer 3

あなたは、二番目のパラメータが欠落している：あなたはおそらく3.0.0バージョンを使用 https://uploadcare.com/documentation/javascript_api/#dialog

uploadcare.openDialog(null, 'file', { 
       publicKey: 'your_key', 
       imagesOnly: true, 
       tabs: ['file', 'url'], 
      }).done((file) => { 
       file.done((fileInfo) => { 
       console.log('UPLOADED: ' + fileInfo.cdnUrl); 
       }); 
      });