Component is not updating dropzone (djsConfig) options base on parent props

[kevalbhatt]

@felixrieseberg I am trying to update djsConfig based on parent props but options are not updating.

Please find my use case.

I want to disabled click of dropzone if uploadLoading is in progress so I have passed clickable:false if loadingUploadButton is true.

I have debugged into the code and I found that https://github.com/felixrieseberg/React-Dropzone-Component/blob/master/src/react-dropzone.js#L107 you are not updating newProps i.e this.props. djsConfig has the old value you need to replace with newProps.

see this Answers: https://stackoverflow.com/a/32414771, https://stackoverflow.com/a/35919008

Parent Component.

export default class CAddArtifact extends BaseComponent {
  constructor(props) {
    super(props);
    let self = this;
    this.state = {
      loadingUploadButton: false
    }
  }

  updateButton(){
  /****** I am updating loadingUploadButton state here ******/ 
  }
    
  render() {
    return (<VAddArtifact {...this.props} {...this.state} loadingUploadButton={this.state.loadingUploadButton} eventHandlers={this.eventHandlers} />);
  }
}

Chilled Component.

export default class V_AddArtifact extends BaseComponent {
  constructor(props) {
    super(props);
    this.dropzoneRef = null;
    this.modal = null;
  }
  render() {
    const {loadingUploadButton} = this.props;
    const componentConfig = {
      showFiletypeIcon: true,
      postUrl: postUrl
    };

    const djsConfig = {
      addRemoveLinks: true,
      timeout: 660000, // 3 mins timeout
      dictDefaultMessage: "To upload, click or drop files in the gray box",
      acceptedFiles: Constants.mimeTypeFormat.dropzone,
      processingmultiple: true,
      autoProcessQueue: false,
      withCredentials: true,
      paramName: "mmFile",
      parallelUploads: 5,
      dictFileTooBig: "File is too big ({{filesize}}MB). Max filesize: {{maxFilesize}}MB.",
      maxFilesize: 50,
      maxFiles: 5,
      params: {
        artifactDetail: null
      }
    };
    return (<DropzoneComponent ref={(ref) => this.dropzoneRef = ref} 
                   config={componentConfig} 
                  eventHandlers={eventHandlers} 
                  djsConfig={loadingUploadButton ? _.extend({}, djsConfig, {clickable: false}): djsConfig}/>);
  }
}

Based on loadingUploadButton props changing the djsConfig:

return (<DropzoneComponent ref={(ref) => this.dropzoneRef = ref} 
                   config={componentConfig} 
                  eventHandlers={eventHandlers} 
                  djsConfig={loadingUploadButton ? _.extend({}, djsConfig, {clickable: false}): djsConfig}/>);

[kliu4]

Same error here. Still no updates in the latest version?

[kliu4]

It seems the code has changed, but I still have the problem

[wrabbit23]

Could this be because in componentWillUpdate it is taking djsConfig from this.props (old props) instead of nextProps (new props)?

[DanielRuf]

Probably. Can you verify that @wrabbit23?

[wrabbit23]

I think i have verified it. My issue was a little different.

Before i upload a file, i need to refresh an auth token and add it to the headers. I was updating djsConfig but the request always had the old auth token!

So I tried updating it twice in the accept function, that way componentWillUpdate gets called twice, and the second time the new headers are the old headers so it gets set.

...and it works.

Here's some docs for componentWillUpdate.

https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/update/tapping_into_componentwillupdate.html

[DanielRuf]

@wrabbit23 would be very cool if you can provide a PR which fixes this =)

[wrabbit23]

Let me see if i can manage to do that

[DanielRuf]

Let me know if you need any assistance with that.

[wrabbit23]

#204

I wasn't able to get the test suite to run locally, and i don't have a lot of time, but this worked when I tested in my app.

[DanielRuf]

Thank you very much for the PR. I'll review it tomorrow, test it locally and check the test status.