Progress bar disappears after processing one of many files

[LukeDev42]

This is caused by using the max_files argument on the uploader object.

-The files are all uploaded -The progress bar loads onto the screen -The bar fills until one file is processed then it disappears -The bar fills to the proper amount before it disappears, i.e. there are 4 files total it will fill to 1/4 full then disappear

The max_files feature is WIP, so I wasn't sure if this was a defect that was logged.

[fohrloop]

Hi Luke, did you try the dev branch version? It should be working properly, although there might be some changes to it before publishing dash-uploader 0.7.0 to PyPi.

[LukeDev42]

What's the best way to install the dev branch? Can I use pip to install it?

[fohrloop]

You could clone this repository, switch to dev branch and pip install -e <path_to_folder_with_setup.py>, or pick a solution from pip install from git repo branch. If I have some time, I could add some pre-release to PyPI.

[fohrloop]

@LukeDev42 , I uploaded a pre-release version (0.7.0a1) to PyPI! You can install it with:

python -m pip install dash-uploader --pre

It is a build from the dev branch. Note that this has a bit different callback syntax. See this comment.

A complete example app could be:

import uuid

import dash_uploader as du
import dash

if du.utils.dash_version_is_at_least("2.0.0"):
    from dash import html  # if dash <= 2.0.0, use: import dash_html_components as html
else:
    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,
        text="Drag and Drop files here",
        text_completed="Completed: ",
        cancel_button=True,
        pause_button=True,
        max_file_size=130,  # 130 Mb
        max_total_size=350,
        # filetypes=["csv", "zip"],
        upload_id=uuid.uuid1(),  # Unique session id
        max_files=10,
    )

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",
                    "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 callback_on_completion(status: du.UploadStatus):

    if status.n_uploaded == 0:
        return  # no files uploaded yet.

    print(status)

    out = []
    if status.uploaded_files is not None:
        return html.Ul([html.Li(str(x)) for x in status.uploaded_files])

    return html.Div("No Files Uploaded Yet!")

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

[fohrloop]

Also, my apologies, the methods in the previous comment would not work as you'd also need to build the JS with npm. (There are instructions in the CONTRIBUTING.md for this but you can now just use the PyPI pre-release)

[LukeDev42]

@np-8 Just got a chance to try this out, works great! Thanks for making it a pre release. About the code you wrote, what are the uuid's used? What is their purpose?

[fohrloop]

The uuid ensures that for every user, the upload_id of the du.Upload is different. It is just an easy way of giving different session ids to users. The usage of unique upload_ids will ensure that users will not accidentally upload files with same name to same folder, which would lead overwriting files and also mixing up files from different users, or same user with different session.

[fohrloop]

You can try it our yourself: putting any value to the upload_id and uploading a file will make the file to be uploaded to C:\somerootfolder\<upload_id>\somefile.csv.

[fohrloop]

I'm glad it worked for you! I'm going to close this now. Feel free to reopen if you still have issues.