提出ボタンの反応イメージアップローダーアップロード

Question

私はthis awesome react packageが複数の画像をアップロードすることを発見しました。

イメージは、ブラウズウィンドウからファイルシステムから選択すると、サーバーにアップロードされます。私が望むのは、私が "submit"ボタンを押したときにアップロードを開始することです。だから私は彼らのプレビューを見ることができますが、ボタンが押されない限り実際には送られません。その理由は、私が他のデータを画像と一緒に送信したいからです。

私はリアクションの初心者です、これを達成する方法があれば誰かが私に指摘してもらえますか？ * ImagesUploader *クラスを拡張できますか？

Answer 1

更新：あなたが使っているパッケージを見て（少し読んで）、アップロードのためにトリガーに（簡単に）フックできないように見えます。つまり、プロジェクトをフォークすることなく、メカニズムのような独自の「一時停止」を追加し、PRを受け入れるかどうかを確認します。

アップロードを手動で開始するフックは公開されません。onLoadStart()とonLoadEnd()のコールバックのみが公開されます。

onLoadStart()にジェネレータ機能を追加して、next()をジェネレータで呼び出すまでアップロードを一時停止することを考えましたが...これは簡単には実現できません...申し訳ありません。私は誰かが情報を後で必要とする場合に備えて私の元の答えを残します。

onChangeイベントハンドラに関数を追加すると、ユーザーがファイルを選択したときにトリガされるようになります。変更を<input>要素に追加します。

// example 
 

 
class FileUploadComponent extends React.Component { 
 
    constructor() { 
 
    super() 
 
    this.state = { 
 
     file: '' 
 
    } 
 
    this.handleChange = this.handleChange.bind(this) 
 
    this.handleSubmit = this.handleSubmit.bind(this) 
 
    } 
 
    handleChange(e) { 
 
    this.setState({file: e.target.files[0]}) 
 
    // do your other "pre-submitted" logic here 
 
    } 
 
    handleSubmit(e) { 
 
    e.preventDefault() 
 
    const { file } = this.state 
 
    // do something with the file 
 
    } 
 
    render() { 
 
    return (
 
     <div> 
 
     <input type='file' onChange={this.handleChange}/> 
 
     <button onClick={this.handleSubmit}></button> 
 
     </div> 
 
    ) 
 
    } 
 
}