felixrieseberg / felixrieseberg/React-Dropzone-Component
Component is not updating dropzone (djsConfig) options base on parent props
- 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