felixrieseberg / felixrieseberg/React-Dropzone-Component

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

Open
#154 10 comments 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
999
Forks
148
PR merge metrics
No merged PRs in 30d

Description

@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 ();
}
}
```

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 ( this.dropzoneRef = ref}
config={componentConfig}
eventHandlers={eventHandlers}
djsConfig={loadingUploadButton ? _.extend({}, djsConfig, {clickable: false}): djsConfig}/>);
}
}
```

Based on loadingUploadButton props changing the djsConfig:

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

Contributor guide

No contributing guide indexed for this repository

Research direction

Start in src/react-dropzone.js around line 107 and trace how incoming props are handled when the parent changes djsConfig. Reproduce the loadingUploadButton transition in the provided V_AddArtifact example and verify that the Dropzone clickable option changes from true to false without remounting.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.