如何在单击按钮时确认文件上传

Question

在进度条达到100％之后，我们的ReactJS网站中的上传图像会自动上传。我们希望一旦用户点击发布按钮，它将确认其上传。但是上载功能运行良好，但是效果不理想。我正在使用来自react-firebase-file-uploader的FileUploader。我该怎么做？

class Announcement extends Component {

    constructor(){
        super();
    }


    state = {
        username: '',
        avatar: '',
        title: '',
        text: '',
        isUploading: false,
        progress: 0,
        avatarURL: '',
        images: null,
        urlStoreL: ''
    };

    handleUploadStart = () => this.setState({isUploading: true, progress: 0});
    handleProgress = (progress) => this.setState({progress});
    handleUploadError = (error) => {
        this.setState({isUploading: false});
        console.error(error);
    }



    handleUploadSuccess = (filename) => {
        const sessionId = new Date().getTime()
        this.setState({avatar: filename, progress: 100, isUploading: false});
        const storeReference = (downloadURL, sessionId) => {
            let currentUser = firebase.auth().currentUser
            // let imageRef = firebase.storage().ref('images').child('filename');

            firebase.database().ref('announceIMG')
                .push({
                    type: 'image',
                    url: downloadURL,
                    postTitle: this.state.title,
                    text: this.state.text,
                    createdAt: sessionId,
                    user: {
                        id: currentUser.uid,
                        email: currentUser.email
                    }
                })
        }



        firebase.storage().ref('images').child(this.state.avatar).getDownloadURL().then(url =>
            storeReference(url,sessionId)
        )

    };

    openModal() {
        this.setState({
            visible : true
        });
    }

    closeModal() {
        this.setState({
            visible : false
        });
    }

    render() {
        const { open } = this.state;

        return (
          <div className="MainContainer">
              {/*<ModalComp/>*/}
              <div className="headingStyle" >
                  <h2 style={h2_style}>Announcements</h2>

                  <form action="" style={uploadComponent}>
                      <section>
                          {/*<h1>React-Modal Examples</h1>*/}
                          <input type="button" style={createAnnouncement_btn} value="Create an Announcement" onClick={() => this.openModal()} />
                          <Modal visible={this.state.visible} width="370" height="400" effect="fadeInUp" onClickAway={() => this.closeModal()}>
                              <div>
                                  <h1>Title</h1>
                                  <p>Some Contents</p>
                                  <label style={{marginLeft: "35px"}}>
                                    Announcement Title:
                                    <input type="text" style={mainDivInput} onChange={event => this.setState({ title: event.target.value })}/>
                                  </label>
                                  <br/>
                                  <label style={{marginLeft: "35px"}}>
                                      Write something about your announcement:
                                      <textarea style={mainDivTextArea} resize="none" onresize="none" onChange={event => this.setState({ text: event.target.value })} />
                                  </label>
                                  <br/>
                                  <br/>
                                  {this.state.isUploading &&
                                  <p>Progress: {this.state.progress}</p>
                                  }
                                  {this.state.avatarURL }
                                  &nbsp;&nbsp;&nbsp;&nbsp;<label style={{backgroundColor: 'grey', color: 'white', padding: 5, borderRadius: '10', pointer: 'cursor', marginLeft: '22px'}}>
                                      Add Image
                                      <FileUploader
                                          hidden
                                          accept="image/*"
                                          storageRef={firebase.storage().ref('images')}
                                          onUploadStart={this.handleUploadStart}
                                          onUploadError={this.handleUploadError}
                                          onUploadSuccess={this.handleUploadSuccess}
                                          onProgress={this.handleProgress}
                                      />
                                  </label>

                                  <button className="btn btn-primary" style={{height: '40px', marginTop: '-75px', marginLeft: '205px'}} onClick={this.handleUploadSuccess} >Post</button>&nbsp;<button  type="cancel" className="btn btn-danger" style={{height: '40px', marginTop: '-75px'}} onClick={() => this.closeModal()}>Cancel</button>
                              </div>
                          </Modal>
                      </section>
                  </form>
              </div>
              <div className="FieldsContainer" style={container_style}>

              </div>

              {/*<form action="" style={uploadComponent}>*/}

                  {/*{this.state.isUploading &&*/}
                  {/*<p>Progress: {this.state.progress}</p>*/}
                  {/*}*/}
                  {/*/!*{this.state.avatarURL &&*!/*/}
                  {/*/!*<img src={this.state.avatarURL} />*!/*/}
                  {/*/!*}*!/*/}
                  {/*<label style={{backgroundColor: 'steelblue', color: 'white', padding: 10, borderRadius: 4, pointer: 'cursor'}}>*/}
                      {/*Upload Image*/}
                      {/*<FileUploader*/}
                          {/*hidden*/}
                          {/*accept="image/*"*/}
                          {/*storageRef={firebase.storage().ref('images')}*/}
                          {/*onUploadStart={this.handleUploadStart}*/}
                          {/*onUploadError={this.handleUploadError}*/}
                          {/*onUploadSuccess={this.handleUploadSuccess}*/}
                          {/*onProgress={this.handleProgress}*/}
                      {/*/>*/}
                  {/*</label>*/}


              {/*</form>*/}
                    <Feeds/>
          </div>
        );
    }
}

export default Announcement;