Support the property `disabled`.

[cainmagi]

Introduction

This PR is aimed at fixing the issue #41.

Dear author:

I am glad to tell you that I have finished the disabled property. By the way, I have also fixed a bug of disableDragAndDrop property. In previous versions, this property would only work during the initialization, and would not work if changed by callbacks.

If you have reviewed my codes and find they are OK, I would start to modify the docs and CHANGELOG.

Thank you! cainmagi

Example

The following codes could be used for testing the disabled property.

import uuid

import dash_uploader as du
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Output, Input

app = dash.Dash(__name__)

UPLOAD_FOLDER_ROOT = r"C:\tmp\Uploads"
du.configure_upload(app, UPLOAD_FOLDER_ROOT)

def get_upload_component(id):
    return du.Upload(
        id=id,
        text="Drag and Drop files here",
        text_completed="Completed: ",
        cancel_button=True,
        max_file_size=1800,  # 1800 Mb
        filetypes=["csv", "zip"],
        upload_id=uuid.uuid1(),  # Unique session id
        max_files=2,
    )

def get_app_layout():

    return html.Div(
        [
            html.H1("Demo"),
            html.Div(
                [
                    dcc.Checklist(
                        id="uploader-configs",
                        options=[
                            {"label": "Disabled", "value": 0}
                        ],
                        value=[]
                    ),
                    get_upload_component(id="dash-uploader"),
                    html.Div(id="callback-output"),
                ],
                style={  # wrapper div style
                    "textAlign": "center",
                    "width": "600px",
                    "padding": "10px",
                    "display": "inline-block",
                },
            ),
        ],
        style={
            "textAlign": "center",
        },
    )

# get_app_layout is a function
# This way we can use unique session id's as upload_id's
app.layout = get_app_layout

# 3) Create a callback
@du.callback(
    output=Output("callback-output", "children"),
    id="dash-uploader",
)
def get_a_list(filenames):
    return html.Ul([html.Li(filenames)])

@app.callback(
    Output("dash-uploader", "disabled"),
    [Input("uploader-configs", "value")]
)
def check_disabled(val_configs):
    if 0 in val_configs:  # Disabled
        return True
    else:
        return False

if __name__ == "__main__":
    app.run_server(debug=True)

What I have tested:

• When checking Disabled option, the uploader would become semi-transparent. The click and the "drag & drop" would be disabled. The text message would change as The uploader is disabled.
• When unchecking Disabled option, everything would work as before.
• First, upload a file. After getting the complete message, check Disabled, the message would be changed to Disabled. If uncheck Disabled, it would turn back to the complete message.
• During the upload of a large file, check Disabled, everything would not be changed. The disable only take effects when the file is not uploaded yet or has been uploaded.

The explanation is:

• The preference order of the message is: uploading message > disabled message > complete message > default message.
• The preference order of the style is: uploading style > disabled style > complete style > default style.
• The preference order of the class is: uploading class > paused class > disabled class > hover class > complete class > default class.

Update report

1. Add properties disabled, disabledMessage, disabledStyle.
2. Replace the unexposed property disabledInput by disabled.
3. Fix the responsive bug of drag and drop region when the property disableDragAndDrop or disabled changes.
4. Add two arguments text_disabled and disabled to du.Upload.
5. Add pytest scripts for the disabled property.
   1. Add test_disabled01_check_disabled_property_update for checking the feedback of disabled.
   2. Add test_disabled02_check_disabled_effect for checking the feed back of disabled and disableDragAndDrop.

[fohrloop]

Hi @cainmagi ! Glad to see this implemented. Looks neat! I added basic testing functionality for the dev branch. Could you add a test for the disabled property to this PR? It would not need to test all the possible combinations, but some of the basic functionality you were testing by hand. If you are not familiar with Selenium, I can try to help you. Or, you can just try to copy the testing functionality from the tests/test_usage.py.

[cainmagi]

Thank you! I have already run your tests. Since I have no much time for web development after each Wednesday, I may have to give you some feedbacks later (as fast as Saturday?)

[fohrloop]

Yeah sure take your time :) I am not in a hurry with this at all!

[cainmagi]

I have already finished the pytest scripts. Please check the updating report for finding more details.

The test for disabled may take a little bit long time, because some of the test steps are expected to fail by TimeoutException.

[fohrloop]

I think this looks good! Could you add CHANGELOG and docs changes for the disabled property?

[cainmagi]

Have updated docs and CHANGELOG.

[cainmagi]

Thank you! I will try to start the new PR about the multi-services the next weekend.