How to show a progress bar for uploading a file using dash upload?

Dash Python
1

I have created a Dash app takes takes file from a user, is it possible to show a progress bar for file upload?

2

You could the the dash-uploader component by @fohrloop :slight_smile:

3

@Emil
I tried that and it was working just like I wanted but don’t know why it was breaking my app layout and my Modals were getting bigger than the device width, check in the image below when using dash-uploader

Screenshot (81)
Screenshot (81)897×880 76.1 KB

when using the dcc upload they look fine :

Screenshot (82)
Screenshot (82)949×890 60.7 KB

4

It looks like some CSS clash. I might be able to fix it quite fast if you can produce a Minimal example that reproduces the issue.

5

@fohrloop
here is the example code
run this code and check the layout for mobile screen devices the Modal gets bigger than the viewport

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

app = app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP],
                      meta_tags=[{'name': 'viewport',
                                  'content': 'width=device-width, initial-scale=1.0'}])
server = app.server

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

app.layout = dbc.Container([

    dbc.Row([
        dbc.Col(
            du.Upload(),
        )
    ]),

    dbc.Row([
        dbc.Col(html.Div(
                [
                    html.A("Click to open Modal", id="open", className="mr-1",
                           style={'color': 'brown', 'cursor': 'pointer'}),
                    dbc.Modal(
                        [
                            dbc.ModalHeader(html.H4("Modal Header"), style={
                                            'color': 'red'}),
                            dbc.ModalBody(
                                ["Modal Body Text"]),
                            dbc.ModalFooter(
                                dbc.Button("Close", id="close",
                                           className="ml-auto")
                            ),
                        ], id="modal", centered=True,
                    ),
                ], style={'text-align': 'center'}
                ),
                )
    ])
], style={'textAlign': 'center'}, fluid=True)

def toggle_modal(n1, n2, is_open):
    if n1 or n2:
        return not is_open
    return is_open


app.callback(
    Output("modal", "is_open"),
    [Input("open", "n_clicks"), Input("close", "n_clicks")],
    [State("modal", "is_open")],
)(toggle_modal)

if __name__ == "__main__":
    app.run_server()
6

@atharvakatre Thanks for the example code. I created an issue for it and I think I got it solved. You can try it in dash-uploader 0.4.2, which can be installed from git master branch:

pip install git+https://github.com/np-8/dash-uploader.git@master
1 Like
7

It’s working without any issues now :slight_smile:
Thanks a lot !
Can’t stress enough how grateful I am!

1 Like
8

@fohrloop also is it possible for the upload component to accept only a specific type of file?
for example only accept text files.

9

Glad to hear it worked for you! I will include it in the next release on PyPi, too.

You can define the extensions that are allowed using the filetypes argument. See the docs for more info.

1 Like