Not working with url_base_pathname set in dash.Dash()

[fohrloop]

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

[fohrloop]

From devtools, it can be seen that there is a HTTP request with Status Code 500 INTERNAL SERVER ERROR.

The request URL is

http://127.0.0.1:8050/base/API/resumable?resumableChunkNumber=1&resumableChunkSize=1048576&resumableCurrentChunkSize=74&resumableTotalSize=74&resumableType=&resumableIdentifier=74-testmd&resumableFilename=test.md&resumableRelativePath=test.md&resumableTotalChunks=1&upload_id=9711e480-187a-11eb-8cc5-2016b9d15494

without the url_base_pathname, an example HTTP POST is pointed to

http://127.0.0.1:8050/API/resumable?resumableChunkNumber=1&resumableChunkSize=1048576&resumableCurrentChunkSize=74&resumableTotalSize=74&resumableType=&resumableIdentifier=74-testmd&resumableFilename=test.md&resumableRelativePath=test.md&resumableTotalChunks=1&upload_id=0c67b705-187b-11eb-b5a4-2016b9d15494

The only difference seems to be the beginning. The server does not handle POST requests pointed to http://127.0.0.1:8050/base/API/resumable. Have to check the configuration steps in du.configure_upload().

[fohrloop]

Looking from the app.config, the url_base_pathname sets actually three things:

 'url_base_pathname': '/base/',
 'routes_pathname_prefix': '/base/',
 'requests_pathname_prefix': '/base/',

Now I have to think how to fix this without breaking the functionality with requests_pathname_prefix (see this issue: #3). If I try to set both, requests_pathname_prefix and url_base_pathname, I will get somewhat helpful explanation:

dash.exceptions.InvalidConfig: You supplied `url_base_pathname` and `requests_pathname_prefix`. This is ambiguous.
To fix this, set `routes_pathname_prefix` instead of `url_base_pathname`.

Note that `requests_pathname_prefix` is the prefix for the AJAX calls that
originate from the client (the web browser) and `routes_pathname_prefix` is
the prefix for the API routes on the backend (this flask server).
`url_base_pathname` will set `requests_pathname_prefix` and
`routes_pathname_prefix` to the same value.
If you need these to be different values then you should set
`requests_pathname_prefix` and `routes_pathname_prefix`,
not `url_base_pathname`.

If I try to set the requests_pathname_prefix and routes_pathname_prefix to be different, I will get also an error:

dash.exceptions.InvalidConfig: `requests_pathname_prefix` needs to ends with `routes_pathname_prefix`.

also

dash.exceptions.InvalidConfig: `routes_pathname_prefix` needs to end with `/`
dash.exceptions.InvalidConfig: `routes_pathname_prefix` needs to start with `/`
dash.exceptions.InvalidConfig: `requests_pathname_prefix` needs to start with `/`

which means that all possible combinations are either

Case 1

routes_pathname_prefix = /foo/
requests_pathname_prefix= /foo/

or

Case 2

routes_pathname_prefix = /foo/
requests_pathname_prefix= /bar/foo/

where both foo and bar may contain forward slashes (/).

[fohrloop]

Fixed in 42ee6f7 (dash-uploader v. 0.4.0)