顯示上傳預覽和停止自動上傳與dropzone反應

Question

現在，當用戶按下上傳按鈕，並選擇一個文件，它會自動上傳文件，但我不想做一個自動上傳，而是我想顯示文件首先向用戶選擇並上傳。我需要幫助，請幫助。這一切都是在做出反應。

const TITLE = 'Resources' 


class ResourceStep extends React.Component { 



onDrop(files) { 
var file = files[0]; 

axios.get('/awsUrl', { 
    headers: { 
    filename: file.name, 
    filetype: file.type 
    } 
}) 
.then(function (result) { 
    var signedUrl = result.data; 

    var options = { 
    headers: { 
     'Content-Type': file.type 
    } 
    }; 

    return axios.put(signedUrl, file, options); 
}) 
.then(function (result) { 
    console.log(result); 
}) 
.catch(function (err) { 
    console.log(err); 
}); 
} 

render() { 
let dropzoneRef; 
    return (
    <div> 
    <Paper style={style} zDepth={3}> 
     <div style={{textAlign:'center'}}> 
     <label> Upload ID : <RaisedButton style={{marginLeft: '20px'}}label="Upload" primary={true} onClick={() => { dropzoneRef.open() }}/></label> 
     <br/> 
     <br/> 
     <br/> 
     <label> Upload Picture : <RaisedButton style={{marginLeft: '30px'}}label="Upload" primary={true} onClick={() => { dropzoneRef.open() }}/></label> 
     <br/> 
     <br/> 
     <br/> 
     <label> Upload Logo : <RaisedButton style={{marginLeft: '45px'}}label="Upload" primary={true} onClick={() => { dropzoneRef.open() }}/></label> 
     </div> 
     <Dropzone ref={(node) => { dropzoneRef = node; }} onDrop={ (files) => this.onDrop(files) } style={{display:'none'}}/> 
    </Paper> 
    </div> 
); 
} 
} 

const mapStateToProps = (state) => { 
return { 
initialValues: state.application.Resources 
}; 
}; 

ResourceStep = reduxForm({ 

    form: 'ResourceStep' 
})(ResourceStep) 


export default { 
    Cmp: ResourceStep = connect(mapStateToProps)(ResourceStep), 
    TITLE 
}; 

Answer 1

只需使用上的文件preview屬性並將其設置爲img SRC。

class ResourceStep extends React.Component { 
    constructor() { 
     super(); 

     this.state = { 
      file: {}, 
     }; 
    } 
    onDrop = (files) => { 
     var file = files[0]; 

     this.setState({ file }); 
    } 
    submitFile =() => { 
     axios.get('/awsUrl', { 
      headers: { 
      filename: this.state.file.name, 
      filetype: this.state.file.type 
      } 
     }) 
     .then(function (result) { 
      var signedUrl = result.data; 

      var options = { 
      headers: { 
       'Content-Type': this.state.file.type 
      } 
      }; 

      return axios.put(signedUrl, this.state.file, options); 
     }) 
     .then(function (result) { 
      console.log(result); 
     }) 
     .catch(function (err) { 
      console.log(err); 
     }); 
    } 
    render() { 
     let dropzoneRef; 
      return (
      <div> 
      <Paper style={style} zDepth={3}> 
       <div style={{textAlign:'center'}}> 
       <label> Upload ID : <RaisedButton style={{marginLeft: '20px'}}label="Upload" primary={true} onClick={() => { dropzoneRef.open() }}/></label> 
       <br/> 
       <br/> 
       <br/> 
       <label> Upload Picture : <RaisedButton style={{marginLeft: '30px'}}label="Upload" primary={true} onClick={() => { dropzoneRef.open() }}/></label> 
       <img src={this.state.file.preview} /> 
       <br/> 
       <br/> 
       <br/> 
       <label> Upload Logo : <RaisedButton style={{marginLeft: '45px'}}label="Upload" primary={true} onClick={() => { dropzoneRef.open() }}/></label> 
       </div> 
       <button type="button" onClick={this.submitFile} /> 
       <Dropzone ref={(node) => { dropzoneRef = node; }} onDrop={ (files) => this.onDrop(files) } style={{display:'none'}}/> 
      </Paper> 
      </div> 
     ); 
    } 
}