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

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

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

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

when using the dcc upload they look fine :

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.

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([


                    html.A("Click to open Modal", id="open", className="mr-1",
                           style={'color': 'brown', 'cursor': 'pointer'}),
                            dbc.ModalHeader(html.H4("Modal Header"), style={
                                            'color': 'red'}),
                                ["Modal Body Text"]),
                                dbc.Button("Close", id="close",
                        ], 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

    Output("modal", "is_open"),
    [Input("open", "n_clicks"), Input("close", "n_clicks")],
    [State("modal", "is_open")],

if __name__ == "__main__":

@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+
1 Like

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

1 Like

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

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