Closed cainmagi closed 3 years ago
Hi @cainmagi ,
You're right, looking at the Upload_ReactComponent.react.js shows that there is a disabledClass argument for the Upload_ReactComponent
component. There is also a pausedClass
argument that is never used. These lines of code are from the source of this fork.
Looking at elsewhere of the Upload_ReactComponent.react.js
, namely at line 270 onwards, there is:
const getClass = () => {
if (this.props.disabledInput) {
return this.props.disableClass;
} else if (this.state.isHovered) {
return this.props.hoveredClass;
} else if (this.state.isUploading) {
return this.props.uploadingClass;
} else if (this.state.isComplete) {
return this.props.completeClass;
} else if (this.state.isPaused) {
return this.props.completeClass;
}
return this.props.className
return this.props.disableClass
is clearly a typo. It should be disabledClass
, not disableClass
. I don't know how this works (what is this.props.disabledInput
?)this.state.isPaused
should return this.props.pausedClass
, not a this.props.completeClass
. This is probably a copy-paste error.Personally I don't have currently need for the disabledClass, but I could fix these typos. Although, I don't know how disabling the component should work. What is your use case? What kind of changes you would like to have?
Thank you. Could you fix the typos first? After that, I could start to implement the disabled
property.
The reason why I need disabled
is, I need to do the following things:
?
, '*', ...), the upload component would be disabled. In this case, the component would be semi-transparent. Clicking the component would not make the uploading dialog prompted.By the way, I guess the reason why there is no error with the typo is that the property disabledInput
is not exposed to the python interface. So this value is always false
. Also, the line with the typo would not be accessed. I do not know what disabledInput
is used for, but I guess it is similar to something like disabled
. Personally, I suggest implementing the property as disabled
, not disabledInput
.
Certainly, I could wrap the component with a div
and use the hidden
property to do a similar thing. But I want a more elegant way to implement the feature.
The fixes are added in the dev
branch.
It seems like a good idea. Also there might be need for additional parameter like text_disabled
which could be a string that is shown instead of the text
that is there normally. That could then be something like "Please, enter valid dataset name".
Thank you! I will try to implement this feature. Once I finish it, I will start a PR. It is a good change for me to learn how to develop a customized dash component :smirk:.
I have just confirmed that the property disableDragAndDrop
only works if it is set by initialization, i.e. changing it by the callback would not take effect. See:
https://github.com/np-8/dash-uploader/blob/f76252936ffc456a00c3930c569a458af44acd40/src/lib/components/Upload_ReactComponent.react.js#L77
~Do you agree that I should move this check to render()
? It may influence my implementation for disabled
.~
Edit:
I have already known how to handle this problem. I should add a check followed by ResumableField.unAssignDrop
in componentDidUpdate
, and should not move the initial check to render()
.
Have finished the PR. See #42. Thank you!
The
dcc.Upload
could be disabled by setting the propertydisabled=True
. The source codes show thatdu.Upload
provides a propertydisabledClass
(see here). However, currentlydu.Upload
does not supportdisabled
argument, which makesdisabledClass
useless.I am working with this extension for building my own project now. I wonder if the author is interested in fixing this problem. If not, I could start a pull request for it.