各画像のアップロードの進捗状況を表示する方法

Question

私は複数の画像アップロードのためにreact-dropzoneを使用しています。画像のアップロードは正常ですが、アップロードの進行状況は表示されません。私はドキュメント上でアップロードの進行状況を明確に見つけることができませんでした。どのように私たちは反応のdropzoneのアップロードの進捗状況を表示できますか？

私もcodesandboxを作成しました。ここでは、リンク

https://codesandbox.io/s/8BEmjLmo

がここでも

onDrop = (accepted, rejected) => { 
    this.setState({ 
     accepted, 
     rejected 
    }); 
    }; 


    showFiles() { 
    const { accepted } = this.state; 
    return (
     <div> 
     <h3>Dropped files: </h3> 
     <ul className="gallery"> 
      {accepted.map((file, idx) => { 
      return (
       <div className="col-md-3" key={idx}> 
       <li> 
        <img 
        src={file.preview} 
        className="img-fluid img-responsive" 
        width={200} 
        alt={file.name} 
        /> 
        <i 
        className="fa fa-remove" 
        onClick={e => this.handleRemove(file)} 
        /> 
        <div className="imageName">{file.name}</div> 
       </li> 
       </div> 
      ); 
      })} 
     </ul> 
     </div> 
    ); 
    } 
    render() { 
    const { accepted } = this.state; 
    return (
     <div style={styles}> 
    <Hello name="CodeSandbox" /> 
    <Dropzone 
     onDrop={this.onDrop} 
     style={style} 
     activeStyle={activeStyle} 
     multiple 
     accept="image/*" 
    > 
     Try Dropping file 
     </Dropzone> 
    {accepted.length !== 0 && this.showFiles()} 
    </div> 
    ); 
    } 
} 

Answer 1

コードがあるされ、ファイルアップロードの進捗状況として反応し、ドロップゾーンには、そのような機能はありません。 https://stackoverflow.com/questions（

const xhr = new XMLHttpRequest(); 

xhr.addEventListener("progress", function(e) { 
    if (e.lengthComputable) { 
    let percentComplete = e.loaded/e.total; 
    console.log(percentComplete); 
    } 
}); 

// Just for demo. 
xhr.open("POST", "/", true); 
xhr.send(null); 

別のオプションは、[マテリアル-UI LinearProgressバーが機能していない]のReact-Dropzone-Component