How to upload multiple files to firebase - React JS

问题

I am working on React JS app, where I am trying to upload files to Firebase. I can easily upload the files and even a single file but the problem is when I am trying to show the progress of the file uploaded on individual file. I have built a UI, when a user selects files, the files get rendered and shows the file size, name and type etc. When I click the upload button, the upload get started in the background. What I am trying to do is, how can I show the progress of multiple files on the View.

The State

this.state = {
  selectedFilesPrev: [],
  filesPreviewAble: false,
  multiple: true,
  showLoaders: false
}

The JSX DOM

render() {

        if(!this.state.filesPreviewAble){
            return (
                <div className='container'>
                    <div className='file-uploader-page' >
                        <div className='upload-icon'> <img src={uploadIcon} alt='upload'/> </div>
                        <p> Drag and Drop Files </p>
                        <p className='orSeparate'>Or</p>
                        <div className='files-upload-btn'>
                            <input type='file' id='file-upload' multiple={this.state.multiple} onChange={this.buttonUpload}/>
                            <label htmlFor='file-upload' className='rcaBtn'> Upload Files </label>
                        </div>
                    </div>
                </div>
            )
        } else if(this.state.filesPreviewAble){
            let l = '';
            if(this.state.showLoaders){
                l = <div className='file-uploading-bar'> <div className='fub-uploaded' style={{width:`${this.state.selectedFilesPrev.progress.percent}%`}}></div> </div>
            } else { l = ''}
            return (
                <div className='container'>
                    <div className='files-preview container-fluid' >
                    <div className='fp-head'> Files to be Uploaded </div>
                    <div className='fp-files'>
                        {
                            this.state.selectedFilesPrev.map( (e, i) => {
                                return (
                                    <div className='single-file row' key={i}>
                                        <div className='file-preview col-2'>
                                            <img src={e.img} alt='icon' />
                                        </div>
                                        <div className='file-meta col-9'>
                                            <span className='file-name'> {e.meta.name} </span>
                                            <span className='file-size'> {this.formatFileSize(e.meta.size)} - {e.meta.type} </span>
                                        </div>
                                        <div className='file-close col-1'> <span onClick={this.removeFile}>×</span> </div>
                                        {l}
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className='fp-upload'>
                        <button className='rcaBtn' onClick={this.handleUploadingFiles}>Upload Now</button>
                    </div>
                    </div>
                </div>
            )
        }

    }

The Files Selector Code

    buttonUpload(event){
        let object = event.target.files;
        let files = []
        for (const key in object) {
            if (object.hasOwnProperty(key)) {
                const element = object[key];
                files.push(element)
            }
        }
        let i = 0;
        files.map( f => {
          this.generatePreviewData(f, (prev) => {
              i++;
              this.state.selectedFilesPrev.push({
                  meta : f,
                  img : prev,
                  progress : {
                      percent : 0,
                      upoaded : false
                  }
              })
              if(i === files.length){
                  this.setState({
                      filesPreviewAble : true
                  })
              }
          })
          return 0;
        })
    }

The Uploader Function (Which Works Perfect)

    handleUploadingFiles(){
        console.log(this.state.selectedFilesPrev)
        this.setState({ showLoaders : true })
        this.state.selectedFilesPrev.map( (file, idx) => {
            let task = stdb.ref(`Images/${file.meta.name}`).put(file.meta);
            task.on('state_changed', snapshot => {
                var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                this.state.selectedFilesPrev[idx].progress.percent = progress;
                console.log("FILE # "+idx,' Upload is ' + progress + '% done');
            },
            error => {
                console.log(error)
            },
            () => {
                stdb.ref('Images').child(file.meta.name).getDownloadURL().then( url => {
                    console.log(url)
                })
            }) 
        })
    }

Note : What I want is simply, when the user click the upload button, each and every file uploading progress should be shown on the UI. The handleUploadingFiles() have the progress, which outputs the progress for each task, but I am unable to show that progress on the component.

来源：https://stackoverflow.com/questions/57027807/how-to-upload-multiple-files-to-firebase-react-js