Simple sample App using dash_uploader

Problem:

A Domino customer was curious if dash_uploader (https://github.com/np-8/dash-uploader) could be used within a Published App.  The following was tested in 4.5

Resolution:

Implementing dash_uploader within an App is pretty simple.  The following example only demonstrates code which uploads a csv or zip file to /mnt/dash. 

Note that published Apps aren't intended to commit files back to the DFS. Apps are primarily meant to be long-running webapps or dashboards used for easy sharing, monitoring & collaborating, but theoretically you could upload and process a file for some type of results rendering in the App.

Example:

The runtime environment for the published App must have the dash, dash-uploader and and dash-html-components python packages.  You could use a Domino Analytics Distribution Compute Env containing this dockerfile instruction: 

RUN pip install dash && \
pip install dash-html-components && \
pip install dash-uploader && \

Your app.sh (within the root directory of your project) could simply call:

python app.py

Your app.py file could contain:

from pathlib import Path
import uuid
import os

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


# Configure Dash to recognize the URL of the container
user = os.environ.get("DOMINO_PROJECT_OWNER")
project = os.environ.get("DOMINO_PROJECT_NAME")
runid = os.environ.get("DOMINO_RUN_ID")
runurl = '/' + user + '/' + project + '/r/notebookSession/'+ runid + '/'

app = dash.Dash(routes_pathname_prefix='/', requests_pathname_prefix=runurl)


UPLOAD_FOLDER_ROOT = r"/mnt/dash"
du.configure_upload(app, UPLOAD_FOLDER_ROOT)

def get_upload_component(id):
return du.Upload(
id=id,
max_file_size=1800, # 1800 Mb
filetypes=['csv', 'zip'],
upload_id=uuid.uuid1(), # Unique session id
)


# get_app_layout is a function
# This way we can use unique session id's as upload_id's
app.layout = 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',
},
)


@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(port=8888, host='0.0.0.0', debug=True)

Publish the app by clicking "Apps" within the project menu.   For more information see the sample in the quick-start project and  https://docs.dominodatalab.com/en/5.1/reference/publish/apps/App_publishing_overview.html