How to center the progress percentage?

[KelSolaar]

Hi,

I was wondering if there is a canonical way to center the progress percentage?

Cheers,

Thomas

[fohrloop]

Which version of dash-uploader you are using?

[KelSolaar]

Hi @np-8,

dash                      2.3.0
dash-bootstrap-components 1.0.3
dash-core-components      2.0.0
dash-html-components      2.0.0
dash-renderer             1.9.1
dash-table                5.0.0
dash-uploader             0.6.0

Cheers,

Thomas

[fohrloop]

Interesting. Here are few screenshots where the percentage seems to be centered.

Could you paste here some code that reproduces this behaviour?

[KelSolaar]

I cannot post the entire app because the repository is currently private (will make public soon) but the code where I use Upload is a follows:

_LAYOUT_COLUMN_OPTIONS_CHILDREN = [
    Div(
        Upload(
            id=_uid("idt-archive-upload"),
            text="Click or drop an IDT Archive here to upload!",
            max_file_size=4096,
            filetypes=["zip"],
            upload_id=uuid.uuid1(),
        ),
        style={
            "textAlign": "center",
            "width": "100%",
            "display": "inline-block",
        },
    ),

# Lot of stuff ...
# Lot of stuff ...
# Lot of stuff ...

LAYOUT = Container(
    [
        H3([Link(APP_NAME, href=APP_PATH)]),
        Main(
            Tabs(
                [
                    Tab(
                        Row(
                            [
                                Col(
                                    _LAYOUT_COLUMN_ILLUMINANT_CHILDREN,
                                    width=3,
                                ),
                                Col(
                                    [
                                        Row(
                                            Col(
                                                _LAYOUT_COLUMN_OPTIONS_CHILDREN,
                                            ),
                                        ),
                                        Row(
                                            Col(
                                                _LAYOUT_COLUMN_IDT_COMPUTATION_CHILDREN,  # noqa
                                            ),
                                        ),
                                    ],
                                    width=9,
                                ),
                            ]
                        ),
                        label="Computations",
                        className="mt-3",
                    ),

# Lot of stuff ...
# Lot of stuff ...
# Lot of stuff ...

[fohrloop]

I could not make you script to run, but I'm thinking if there is some css styling that overrides the defaults and makes the percentage not centered.

Could you try to create app2.py to the side of your app.py with following contents and see if the percentage is centered?

import uuid

import dash_uploader as du
import dash
import dash_html_components as html
from dash.dependencies import Output

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,
        max_file_size=1800,  # 1800 Mb
        filetypes=["csv", "zip"],
        upload_id=uuid.uuid1(),  # Unique session id
    )


def get_app_layout():

    return html.Div(
        [
            html.H1("Demo"),
            html.Div(
                [
                    get_upload_component(id="dash-uploader"),
                    html.Div(id="callback-output"),
                ],
                style={  # wrapper div style
                    "textAlign": "center",
                    "width": "600px",
                    "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


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


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

[fohrloop]

If that does not work, see if you have .css files in an assets folder that gets loaded, which could potentially change how the component looks like. Also, you could check with browser debug tools (F12 on Chrome) the properties of the component. Are they different than this (right click on the percentage -> Inspect). It is easier to inspect if you enable the pause button first.

.progress-value class is responsible for the positioning of the percentage. See if you import any css that alters this. I think this should be called something like .dash-uploader-progress-value in the future to prevent clashes.

[fohrloop]

As a fix, you could try to add to your custom css this:

#dash-uploader span.progress-value {
    position: absolute !important;
    right: 0px !important;
    left: 0px !important;
}

Replace #dash-uploader with the du.Upload component id if you have changed it. The css code is inserted to any .css file in the assets folder. So, if your app is located at C:\somefolder\app.py, you should add the css code to C:\somefolder\assets\somestyle.css.

[KelSolaar]

Thanks I will try! The pause button is super useful here :) In the meantime, here is a screengrab, the CSS seems to be correct:

[fohrloop]

If the css is correct, then I would assume that there is something around the component that interferes with it.

Try if you could find a minimal example that reproduces the problem. Perhaps, try disabling bootstrap (or other additional css). That would help to pinpoint the problem. Also, you could try to reproduce the problem in the app I posted above, by adding there components from your app.

[KelSolaar]

Hi @np-8,

Sorry for not getting back to you before, so it indeed seems like to be related to dash_bootstrap_components:

Here is some code to reproduce the issue:

import uuid

import dash_uploader as du
import dash
from dash import html
import dash_bootstrap_components
from dash.dependencies import Output
from dash_bootstrap_components import Col, Container, Row

app = dash.Dash(
    __name__, external_stylesheets=[dash_bootstrap_components.themes.DARKLY]
)

UPLOAD_FOLDER_ROOT = r"/private/var/folders/xr/sf4r3m2s761fl25h8zsl3k4w0000gn/T/Uploads"
du.configure_upload(app, UPLOAD_FOLDER_ROOT)


def get_upload_component(id):
    return du.Upload(
        id=id,
        max_file_size=4096,  # 1800 Mb
        filetypes=["csv", "zip"],
        upload_id=uuid.uuid1(),  # Unique session id
        pause_button=True,
    )


def get_app_layout():

    return Container(
        Row(
            [
                Col(html.H3("Col 3")),
                Col(
                    html.Div(
                        [
                            get_upload_component(id="dash-uploader"),
                            html.Div(id="callback-output"),
                        ],
                        style={  # wrapper div style
                            "textAlign": "center",
                            "width": "100%",
                            "display": "inline-block",
                        },
                    )
                ),
            ]
        ),
    )


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


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


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