displaying upload preview and stopping auto upload with dropzone react

Question

Right now when the user presses the upload button and picks a file it automatically uploads the file but I don't want to do an automatic upload instead, I want to display the files first to the user that they have selected and then upload. I need help with this please help. This is all done in react.

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
 };

You should format your code in notepad++ or something. It's hard to read. — Martin Dawson
– Martin Dawson, Commented Jul 9, 2017 at 16:49

Martin Dawson · Accepted Answer · 2017-07-09 16:57:56Z

Just use preview property on the file and set that to 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>
        );
    }
}

Collectives™ on Stack Overflow

displaying upload preview and stopping auto upload with dropzone react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related