fohrloop / dash-uploader Goto Github PK

Hey! Me again! :-)
I am trying to publish my dashboard to heroku, unfortunately I couldn't upload the object onto web (https://dash-pyscnet.herokuapp.com/)... It was perfectly working locally.

So i am wondering have you also tested with heroku?! ;-)

You can find the code here

Thank you very much and look forward to your response. 👍

Hi,

Thanks for you provide amazing functionality for us, It's cool! 👍
One question I want to query you:
When I wanted to load multiple files(291files) in usage.py, I got 288 files actually. It seems some files missing, any comment?

Operation step:

1. Clone this repository in fix-multiupload branch
2. Running demo page => python usage.py
3. open web and load 291 files
4. I got 288 files actually.

Here is running code(usage.py) and result:

Thanks and best regards,

Ricky H Chen

Hi,

I have installed the dash uploader recently and noticed that it's not compatible with dash 2.0.0. The HTML and DCC import has been changed in-dash 2.0.0 from
import dash_html_components as html
to
from dash import html

Just wondering if there is any plan to release du-uploader compatible with Dash 2.0.0

Thanks

When uploading a batch of files, isCompleted is fired upon the first uploaded file only. Any subsequent files get upload still, but no further callback is fired.

Also noteworthy, the progressbar jumps back and forth on multiple files. Starting from 0 for every files but progress seems to be tracked in relation to all files and not per file. This should be more consistent.

Thanks for keeping improving this fancy component!

The dcc.Upload could be disabled by setting the property disabled=True. The source codes show that du.Upload provides a property disabledClass (see here). However, currently du.Upload does not support disabled argument, which makes disabledClass useless.

I am working with this extension for building my own project now. I wonder if the author is interested in fixing this problem. If not, I could start a pull request for it.

Hi,

My code consists in the following:

# function to return all files in folder
def uploaded_files():
    files = []
    for filename in os.listdir(directory):
        file = os.path.join(directory, filename)
        files.append({'label': file, 'value': file})
    return files

### Layout
du.Upload(
    id='dash-uploader',
    filetypes=['csv', 'xls', 'xlsx'],
    max_files=2,
),

html.Div(id='callback-output', style={'display': 'none'})

dbc.Select(
    id="browse_content",
    placeholder="Select Data File",
    options=[],
),

### Callbacks
@du.callback(
    output=Output('callback-output', 'children'),
    id='dash-uploader'
)
def update_list(filenames):
    print('update_list', filenames)
    return filenames

@app.callback(
    [Output('browse_content', 'options')],
    [Input('callback-output', 'children')]
)
def get_a_list(files):
    filenames = uploaded_files()
    print('get_a_list', files, filenames)
    return filenames

But when uploading 2 files: file1.xlsx and file2.xlsx, I get the following print:

update_list ['C:\Users\file1.xlsx']
get_a_list ['C:\Users\file1.xlsx'] [{'label': 'file1.xlsx', 'value': 'file1.xlsx'}]

Both files have been uploaded in the folder, but it seems that callbacks stop after the first file being uploaded: even the line filenames = uploaded_files() in the callback "get_a_list" returns only the first file...

Any idea what's wrong here please?

Thanks!

Right now, the uploader only accepts a default_style which is used as style for the parent uploader div. It would be really useful if we can pass additional dicts that override the style of children components, like the text label or progress div.

Alternatively, if instead of the "Drag and Drop" text, we can define the children of the label tag through dash components - that would allow a lot of extra options, like adding pictures or splitting long text into multiple lines.

I am serving my not on / but on something like sub1.example.org/mypath. Dash has an option for that are requests_pathname_prefix and routes_pathname_prefix. I found that uploader does not take these settings into account and therefore breaks as it looks on /. Is there a setting to change that?

In the dash-uploader 0.7.0 update, the new (proposed) callback syntax is

@du.callback(
    output=Output('callback-output', 'children'),
    id='dash-uploader',
)
def get_a_list(status: du.UploadStatus):
    print(status.n_files_uploaded, status.n_files_total)
    return html.Ul([html.Li(x) for x in status.filenames])

du.UploadStatus attributes

The du.UploadStatus object could include

• status.latest_file (pathlib.Path): The full file path to the file that has been latest uploaded
• status.uploaded_files (list of pathlib.Path): The list of full file paths to all of the uploaded files. (uploaded in this session)
• status.is_completed (bool): True if all the files have been uploaded
• status.n_uploaded (int): The number of files already uploaded in this session
• status.n_total (int): The number of files to be uploaded.
• status.uploaded_size_mb (float): Size of files uploaded in Megabytes
• status.total_size_mb (float): Total size of files to be uploaded in Megabytes
• status.upload_id (str or None): The upload id used in the upload process, if any.
• status.progress (float): From 0 to 1, indicating the current upload progress of all files. From flow.progress(). Todo: Is this calculated based on amount of files or total file size?
• status.timeremaining (float): The remaining time to upload all files, in seconds. From flow.timeRemaining(). Dropped from the list (see #68 (comment)).

Goal: implement this UploadStatus class. It will serve as guide when implementing the props and state or the Upload_ReactComponent of the 0.7.0 release.

I am running dash on a server which sits behind a reverse proxy. Thus, the flask server does not get the real client IP but the proxy IP instead.
Upload would let me select files and display the progress bar but is stuck at 0% and never progresses or actually send data.
Maybe this is a bug of resumable.js? -> 23/resumable.js#214

In dash_uploader.min.js bootstrap with vulnerability is used (CVE-2019-8331).

Details: twbs/bootstrap#28236

Solution: upgrade bootstrap version from 4.1.3 to 4.3.1

Affected version: f033683 (flow-dev branch)

Steps to reproduce

1. Use max_file_size for du.Upload
2. Upload multiple files (folder of files) where part of files (e.g. 2 files) are below max_file_size and part of files (e.g. 2 files) is above max_file_size
3. The upload text total files will reflect the original amount of selected files, even though some of the files were dropped away because of max_file_size. (In the figure: Uploading (64.00 Mb, File 1/4) should be Uploading (64.00 Mb, File 1/2))

Hey! thanks a lot for this cool dash-uploader. I tried to integrate it with my dash app. It works perfectly well with a single output. Unfortunately, when it comes to multiple output (e.g. multiple children for different pages), it didn't work.

Any comments?!
Look forward to your reply. :-)

Curious if this is supposed to work with DjangoDash or if I have some versioning issue, I get the following error trying it out

from django_plotly_dash import DjangoDash
import dash_uploader as du

app = DjangoDash('Scratch')
du.configure_upload(app.caller_module.dash.Dash, 'C:\\tmp')

dash 1.17.0
dash-core-components 1.13.0
dash-resumable-upload 0.0.3
dash-uploader 0.6.0
Django 3.1.7
django-plotly-dash 1.4.2

File "C:\Users\User\AppData\Local\Programs\Python\Python38\lib\site-packages\dash_uploader\configure_upload.py", line 60, in configure_upload
settings.requests_pathname_prefix = app.config.get("requests_pathname_prefix", "/")
AttributeError: type object 'Dash' has no attribute 'config'

This considers the flow-dev branch (599f6ff). When uploading files, the progressbar / progress jumps.

For example, when uploading two files with about the same size

• First, the progress goes from 0 to 55% (first file)
• Then, the progress goes from 0 to 100% (second file)

The progress is read from the flowComponent.progress().

What would be expected that during the second file, the progress goes from 55% to 100%.

Little bug I found: 'upload_id' appears to be "frozen" to the first upload component that is created. So if it is created with upload_id=None (it will default to the internal session id) but then if a new layout is generated with the same IDs, but a new/different upload_id, the original upload_id is still used. Interestingly, the callbacks get the "new" upload_id, even though the files get created in the "old" upload_id folder.

I have confirmed, that if the upload ID is cycled too, then it works as expected, so React is caching the original component upload_id somewhere.

(In my use case, I am trying to cycle the upload_id for the upload component whenever a drawer is opened and a new form is generated so that the associated files can be easily separated from older stuff in the folder. The callback does not adequately report on multiple file selection - only a single file is returned, so the only way to find out is to list the files in the temp folder - which now may not be unique. I guess the temporary work-around is to scrub the session folder.)

Anyway, awesome project - thanks for sharing!

Hi,

I'm working on an app where the user will upload a csv file to the server, do some preprocessing and then fit some ML models.
What I understand, dash_uploader uploads the file to the server folder and then I have to use pandas to load the csv file into the app. For large files, this doubles the time needed to actually have the file loaded into the app.

All examples I am seeing of dash_uploader just prints the filename to the app. Is there a way to view the contents of the file, without reopening, with pandas etc?

I am trying to find a way on how to handle that uploaded file, convert it to pandas db using read_csv, and then upload it to my mongo database. I have created the "/upload" endpoint, but for some reason, I am not hitting that endpoint. I have attached the image for the code. Any ideas will be appreciated.

I would like to add more description on what kind of files can be uploaded. Is there any way to do that?

ref: https://community.plotly.com/t/how-to-show-a-progress-bar-for-uploading-a-file-using-dash-upload/48988/5

Expected outcome

Actual outcome

Code to reproduce

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

From 23/resumable.js#533 seems that resumable.js not maintained anymore. Flow.js if a fork of resumable.js, which has added functionality and seems to be actively maintained. The latest version of resumable.js on npm (1.1.0) is from Nov 2017, and latest version of flow.js on npm (2.14.1) is from June 2020.

There could be also some other interesting options.

I am open to suggestions, if anyone knows better than me what is out there.

This is kind of a requirement for any real-world application on using dash-uploader in the public internet. Currently, the README states:

⚠️Security note: The Upload component allows POST requests and uploads of arbitrary files to the server harddisk and one should take this into account (with user token checking etc.) if used as part of a public website!

This could be tackled with a bit of python code. There could be a subclassable class that has the logic for checking POST requests. Default would be to accept everything, but user could write a validate_post_request method that would override this and give more possibilities on how the uploading would generally work. This could also be done with functions as arguments to the du.configure_upload, but classes are a bit nicer in sense that there could be other customizable things, too. For example, server could decide what to do with which type or size of file, etc.

Description

The dash uploader component does not work (i.e. upload does not start) if url_base_pathname is set when initializing the dash.Dash().

MWE

from pathlib import Path
import uuid

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

app = dash.Dash(__name__, url_base_pathname='/base/')

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
        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',
                    '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)])


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

Versions

dash-uploader version: 0.3.1
dash: 1.14.0

Hi, I tried cloning the repository and pip install . , but that resulted in

error: package directory 'dash_uploader/_build' does not exist

I wonder what additional steps need to be done and I could not find instructions in the docs.

In the document it says the file size is unlimited,

This is misleading. Actually, there exists a limitation that the file size should not be greater than 1GB. Have you considered the following modifications?

• Make dash-uploader supports file larger than 1GB.
• Or change the README.md, specify the limitation correctly.

Please let me know if you have better ideas. Thank you!

Hi @np-8,

So I want to deploy a Dash app and I need to set the requests_pathname_prefix for the server's app name. So code is below:

    app = dash.Dash(
        __name__,
        server=server,
        external_stylesheets=[dbc.themes.BOOTSTRAP],
        # requests_pathname_prefix='/swatviewer/'
    )
    
    app.config.update({
        'requests_pathname_prefix': f'{server.config["APP_ROOT"]}/'
    })

    # app.css.config.serve_locally = True
    # app.scripts.config.serve_locally = True
    
    
    app.layout = maintabs

    du.configure_upload(
        app, server.config['UPLOAD_FOLDER_ROOT'],
        # I try this: upload_api=f'{server.config["APP_ROOT"]}/API/dash-uploader'
    )

The page renders correctly however when I tried to upload a file using dash-uploader, it shows 404 for the resumable.... file. I tried to set the upload_api in du.configure_upload but it does not work.

My app is located at www.nebraska-water.xyz/swatviewer.

Is there I am missing here or a bug you could fix? Thanks!

Thanks for this amazing tool.

To avoid the increase of storage on the server, I need to remove the files uploaded by users.

Can this be implemented? Or is there a way to do it (from python or bash). Thanks!

Hi!
Would it be useful for this package to utilize some capabilities of GitHub Actions such as run tests on each pull request or merge and upload new package version to PyPI on new tag created on GitHub?
If so, I would like to do it

Any kind of test. Just to get testing rolling.

0.2.2 cannot be installed via pip:

ERROR: Command errored out with exit status 1:
     command: /home/user/PycharmProjects/columbus/venv3.8/bin/python -c 'import sys, setuptools, tokenize; sys.argv[0] = '"'"'/tmp/pip-install-ea6fq8dy/dash-uploader/setup.py'"'"'; __file__='"'"'/tmp/pip-install-ea6fq8dy/dash-uploader/setup.py'"'"';f=getattr(tokenize, '"'"'open'"'"', open)(__file__);code=f.read().replace('"'"'\r\n'"'"', '"'"'\n'"'"');f.close();exec(compile(code, __file__, '"'"'exec'"'"'))' egg_info --egg-base /tmp/pip-install-ea6fq8dy/dash-uploader/pip-egg-info
         cwd: /tmp/pip-install-ea6fq8dy/dash-uploader/
    Complete output (5 lines):
    Traceback (most recent call last):
      File "<string>", line 1, in <module>
      File "/tmp/pip-install-ea6fq8dy/dash-uploader/setup.py", line 8, in <module>
        with open('docs/README-PyPi.md', encoding='utf-8') as f:
    FileNotFoundError: [Errno 2] No such file or directory: 'docs/README-PyPi.md'
    ----------------------------------------
ERROR: Command errored out with exit status 1: python setup.py egg_info Check the logs for full command output.

it seems the README-PyPi.md is missing from the package

Is it possible to change the folder dynamically? In my application user can change the working directory, so the Upload folder should be changed simultaneously. But when I'm trying to du.configure_upload() again, I'm getting an error:
AssertionError: A setup function was called after the first request was handled. This usually indicates a bug in the application where a module was not imported and decorators or other functionality was called too late. To fix this make sure to import all your view modules, database models and everything related at a central place before the application starts serving requests.

I like the tool a lot. It solves the problem of the progress bar. It would be nice to have multi-file upload enabled. Would it be possible to simply wrap the upload routine into a for loop and upload files one by one? With potentially a second progress bar that shows the overall progress.

Sometimes when uploading files, the upload process is intermitted. Amongst the python logs, there is text

Traceback (most recent call last):
  File "C:\repos\dash-uploader\dash_uploader\httprequesthandler.py", line 42, in post
    return self._post()
  File "C:\repos\dash-uploader\dash_uploader\httprequesthandler.py", line 114, in _post
    os.unlink(target_file_name)
PermissionError: [WinError 32] The process cannot access the file because it is being used by another process: 'C:\\tmp\\Uploads\\dd620eac-934d-11ec-9bf6-2016b9d15494\\somefile.csv'

This will cause the upload of the file to fail.

• Create proper error message to user, if error occurs
• Find a way to reproduce the error reliably for tests, if possible
• Create a fix (retries)

dash-uploader version: 944204a (and most probably all versions before that, and <= 0.6.0)

Hi, I am using this architecture to deploy multiple dash apps on flask: Repository

I am quite confused the best way to integrate dash-uploader into init.py

May I declare du.configure_upload on callback of dashapp I want to use it (in order to avoid conflict ) ?

def register_callbacks(dashapp):

    UPLOAD_FOLDER = "/tmp/Uploads"
    du.configure_upload(dashapp, UPLOAD_FOLDER)

    @dashapp.callback(Output('callback-output', 'children'),
                [Input('upload-files-div', 'fileNames')])
    def display_files(fileNames):

        if fileNames is not None:
            out = []
            for filename in fileNames:
                file = Path(UPLOAD_FOLDER) / filename
                out.append(file)
            return html.Ul([html.Li(str(x)) for x in out])
        return html.Ul(html.Li("No Files Uploaded Yet!"))

Or should I insert this into this function ? It seems it occurs some conflicts declaring this more than 1 time.

def register_dashapp_1(app, title, base_pathname, layout, register_callbacks):
    # Meta tags for viewport responsiveness
    meta_viewport = {"name": "viewport", "content": "width=device-width, initial-scale=1, shrink-to-fit=no"}
    external_stylesheets = [dbc.themes.LUX]
    
    my_dashapp = dash.Dash(__name__,
                           server=app,
                           url_base_pathname=f'/{base_pathname}/',
                           assets_folder=get_root_path(__name__) + f'/{base_pathname}/assets/',
                           meta_tags=[meta_viewport])
    
    with app.app_context():
        my_dashapp.title = title 
        my_dashapp.layout = layout
        register_callbacks(my_dashapp)

    _protect_dashviews(my_dashapp)

My output is:

• Progress bar stays on 0%

flask_1  | 172.21.0.1 - - [09/Mar/2021 19:20:32] "GET /upload/_dash-layout HTTP/1.1" 200 -
flask_1  | 172.21.0.1 - - [09/Mar/2021 19:20:32] "GET /upload/_dash-dependencies HTTP/1.1" 200 -
flask_1  | 172.21.0.1 - - [09/Mar/2021 19:20:32] "POST /upload/_dash-update-component HTTP/1.1" 200 -
flask_1  | 172.21.0.1 - - [09/Mar/2021 19:20:35] "POST /API/resumable?resumableChunkNumber=1&resumableChunkSize=1048576&resumableCurrentChunkSize=17396&resumableTotalSize=17396&resumableType=text%2Fcsv&resumableIdentifier=17396-datasetcsv&resumableFilename=dataset.csv&resumableRelativePath=dataset.csv&resumableTotalChunks=1&upload_id=80e27106-810c-11eb-a900-0242ac150003 HTTP/1.1" 404 -
flask_1  | 172.21.0.1 - - [09/Mar/2021 19:20:35] "POST /upload/_dash-update-component HTTP/1.1" 200 -

I think quite some people are not happy with the standard dcc.Upload component as it simply does not work with large files and causes the entire app to crash.
You component looks very robust now and thus I would propose to start the discussion at github.com/plotly/dash whether they want to include your component...

A long time has gone from the early days of dash-uploader (there might something in the package.json even from the early 2018 from dash-resumable-upload).

The JS word changes fast, and it would be time to:

• Remove any dependencies in package.json that are not needed
• Update / change any dependencies of deprecated packages
• Update any package with known security issues, if fix available.

I think this should be handled before the release of the dash-uploader 0.7.0, which aims to fix many other things, too.

I'm not a front-end expert myself, so it probably will take me some time to clean the package.json. If anyone else here is more familiar with JS, and would like to take a look, please read this to get started!

There should be some sort of document / diagram describing how dash-uploader works under the hood. This would improve the developer experience and make it easier for everyone to collaborate.

I am new to Dash. Looks like the dash uploader stops working when I started using sidebar. The upload process does not start at all. I suspect this is because to render the sidebar page content I need to use url based pathname. Is this related to the other issue "Not working with url_base_pathname set in dash.Dash() "? But seems like this issue has already been addressed...

Although dash-uploader is based on resumablejs, it seems that the uploader could not resume from the interrupted uploading file (even we set the same upload_id). To reproduce the experiment, we could:

1. Launch a dashboard with an uploader, and the upload_id set to a specific value (or not used).
2. Upload a large file.
3. When the file is uploaded for half. Use Ctrl + C to interrupt the server.
4. Launch the same dashboard again.
5. Upload the same large file. We could find that the progress starts from 0, not half.

I wonder whether the author is interested in implementing the resumable feature in the future. In my understanding, this implementation may be tricky, but I do not need this feature urgently.

The upload component (src\lib\components\Upload_ReactComponent.react.js) seems to select the "most appropriate css class" by this logic:

        const getClass = () => {
            if (this.props.disabledInput) {
                return this.props.disableClass;
            } else if (this.state.isHovered) {
                return this.props.hoveredClass;
            } else if (this.state.isUploading) {
                return this.props.uploadingClass;
            } else if (this.state.isComplete) {
                return this.props.completeClass;
            } else if (this.state.isPaused) {
                return this.props.completeClass;
            }
            return this.props.className

        }

in addition to the typo in "isPaused", the class should be the union of all classes. For example, if the state is uploading, and mouse is on the component (hovered), the class should be this.props.uploadingClass this.props.hoveredClass (class strings one after another, separated with space(s).

The flow.js allows for simultaneousUploads > 1. Test if this could work with dash-uploader.

I have a login layer implemented with Flask, however, when that is active an the dash-app with the flask layer is served with one of gunicorn, waitress, uwsgi, the upload does not work anymore. If anyone has had the same issue and knows a solution please let me know.

In the future, it might be useful to have a possibility to add multiple du.Upload components on the same app. This has some implications

• First, there should be one flask route configured per each Upload component.
• The uploads should not clash with each another; Even if user has three components uploading my_big_data.csv (same filename), all the chunks should be perfectly independent from each other.
• Configuring callbacks must take this into account

pip list | grep 'dash'

dash 1.11.0
dash-bootstrap-components 0.10.0
dash-core-components 1.9.1
dash-html-components 1.0.3
dash-renderer 1.4.0
dash-table 4.6.2
dash-uploader 0.1.0

The display_files-function of the MWE is not called after each upload.
It does work for the first time, but any successive call won't update the Output.

Files are uploaded to UPLOAD_FOLDER and the Complete Label is also changed.

Strangely it seems like no component prop is changed though.

The Upload_ReactComponent.react.js would really need some refactoring. This would make further development a lot easier and the package more maintainable.

du.configure_upload(app, folder='temp')
du.Upload(
text_completed='Upload completed',
filetypes=['xlsx'],
max_files=10,
id='uploader'
upload_id = 'user1'
),

with this, I can upload file to temp/user1
But how to upload file to temp/user1/another_folder

are CSS classes written in files from the assets folder currently supported?

Thanks for this awesome uploader project @np-8 .

Also, I've noticed that in addition to the behavior of callback above, it seems that even if du.Upload(max_files=1), I can still upload multiple files. And with the custom setting of width, the percentage progress would be displayed in the wrong place. Here is my example app.py file:

# Run this app with `python app.py` and
# visit http://127.0.0.1:8088/ in your web browser.
import os
from pathlib import Path

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

UPLOAD_FOLDER = os.path.join(os.path.dirname(__file__), "uploads")

app = dash.Dash(
    __name__
)
server = app.server

# configure dash-uploader
du.configure_upload(app, UPLOAD_FOLDER)


def get_upload_component(component_id):
    return du.Upload(
        id=component_id,
        text='Drag and Drop or Select Files',
        text_completed='Ready! ',
        max_file_size=2048,  # 2048 Mb
        max_files=1  # even with 1 max file can still upload multiple
    )


def get_app_layout():
    return html.Div(children=[
        html.H1(
            children='Upload',
            style={
                'textAlign': 'center',
            }
        ),
        html.Div(
            [
                get_upload_component(component_id='dash-uploader'),
                html.Div(id='callback-output'),
            ],
            style={  # wrapper div style
                'textAlign': 'center',
                'width': '600px',
                'display': 'block'
            }
        )
    ], style={'margin': '10px'})


app.layout = get_app_layout


@app.callback(
    Output('callback-output', 'children'),
    [Input('dash-uploader', 'isCompleted')],
    [State('dash-uploader', 'fileNames'),
     State('dash-uploader', 'upload_id')],
)
def get_a_list(is_completed, filenames, upload_id):
    if not is_completed:
        return html.Div(hidden=True)
    out = []
    if filenames is not None:
        if upload_id:
            root_folder = Path(UPLOAD_FOLDER) / upload_id
        else:
            root_folder = Path(UPLOAD_FOLDER)

        for filename in filenames:
            file = root_folder / filename
            out.append(file)
        return html.Ul([html.Li(str(x)) for x in out])

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


if __name__ == '__main__':
    app.run_server(host='0.0.0.0', port=8088, debug=True)

Originally posted by @20joseph10 in #5 (comment)