The disabled property is not working.

[cainmagi]

The dcc.Upload could be disabled by setting the property disabled=True. The source codes show that du.Upload provides a property disabledClass (see here). However, currently du.Upload does not support disabled argument, which makes disabledClass 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.

[fohrloop]

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

• The 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?)
• The 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?

[cainmagi]

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:

• User needs to input an argument (like dataset name) by an input box.
• There is an automatic checking for the input value, if the value is invalid (for example, containing unwanted symbols like ?, '*', ...), 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.

[fohrloop]

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".

[cainmagi]

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 😏.

[cainmagi]

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().

[cainmagi]

Have finished the PR. See #42.
Thank you!