We Keep Coding

Dash dcc.upload component for large file

I am developing a dash application. In that I have file upload feature. The file size is big enough minimum is some about 100MB to support that I have set max_size=-1 (no file size limit).
Below is code:
dcc.Upload(
id="upload_dataset",
children=html.Div(
[
"Drag and Drop or ",
html.A(
"Select File",
style={
"font-weight": "bold",
},
title="Click to select file.",
),
]
),
multiple=False,
max_size=-1,
)
The uploaded files are saved on server side. This dcc.upload component has attribute contents which holds the entire data in string format using base64. While browsing I come to know that before sending the data to server, this contents is also stored in web browser memory.
Problem: for small file size storing contents in web browser memory may be fine. Since I have large file size by doing so browser may crash and app freeze.
Is there any way to by-pass this default behavior and I will like to send file in chunks or as stream?
How to achieve this in dash using dcc.upload component or any other way?

You can use the dash-uploader library. It allows you to directly transfer data from the browser to the server hard drive, so you don't face any file size issues.
This library is a hobby project of the maintainer, so it might not be the most production worthy library. Though, I tested it today and it seems stable enough, I even got it to working with a Dash app that runs on an AWS Lambda.
Visit the more extensive documentation to get started with the library.
Here is a short code example to get you started with a local version.
requirements.txt
install with pip install -r requirements.txt
dash==2.8.1
dash-uploader==0.7.0a1
packaging==21.3
app.py
Copy code in file app.py and run the file. It runs as-is.
import pprint
from pathlib import Path
import os
import uuid
import dash_uploader as du
import dash
from dash import Output, html
app = dash.Dash(__name__)
UPLOAD_FOLDER_ROOT = Path("./tmp") / "uploads"
du.configure_upload(
app,
str(UPLOAD_FOLDER_ROOT),
use_upload_id=True,
)
def get_upload_component(id):
return du.Upload(
id=id,
max_file_size=50, # 50 Mb
chunk_size=4, # 4 MB
filetypes=["csv", "json", "txt", "xlsx", "xls", "png"],
upload_id=uuid.uuid1(), # Unique session id
)
def get_app_layout():
return html.Div(
[
html.H1("Demo"),
html.Div(
children=[
get_upload_component("upload_data"),
html.Div(
id="upload_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
#du.callback(
output=Output("upload_output", "children"),
id="upload_data",
)
def callback_on_completion(status: du.UploadStatus):
"""Has some print statements to get you started in understanding the status
object and how to access the file location of your uploaded file."""
pprint.pprint(status.__dict__)
print(f"Contents of {UPLOAD_FOLDER_ROOT}:\n{os.listdir(UPLOAD_FOLDER_ROOT)}")
upload_id_folder = Path(status.uploaded_files[0]).parent
print(f"Current upload_id: {upload_id_folder.name}")
print(
f"Contents of subfolder {upload_id_folder.name}:\n{os.listdir(upload_id_folder)}"
)
return html.Ul([html.Li(str(x)) for x in status.uploaded_files])
if __name__ == "__main__":
app.run(debug=True)

Stream file into python-pptx with Dash

I would like a Dash dashboard to extract data from powerpoint .pptx files, a deployment constraint is that we can't read or write files to a directory so I would like to stream the input file straight into python-pptx's Presentation function.
here is a small reprex:
from flask import Flask, send_from_directory
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from pptx import Presentation
server = Flask(__name__)
app = dash.Dash(server=server)
app.layout = html.Div(
[
html.H1("File Browser"),
html.H2("Upload"),
dcc.Upload(
id="upload-data",
children=html.Div(
["Drag and drop or click to select a file to upload."]
),
multiple=True,
),
html.H2("Shape List"),
html.Ul(id="shape-list"),
],
style={"max-width": "500px"},
)
#app.callback(
Output("shape-list", "children"),
[Input("upload-data", "filename"), Input("upload-data", "contents")],
)
def update_output(uploaded_filenames, uploaded_file_contents):
shape_text = []
if uploaded_filenames is not None and uploaded_file_contents is not None:
for name, data in zip(uploaded_filenames, uploaded_file_contents):
prs = Presentation(data)
shape_text += [shape.text for shape in prs.slides[0].shapes]
return [html.Li(txt) for txt in shape_text]
if __name__ == "__main__":
app.run_server(debug=True, port=8888)
which gives error:
pptx.exc.PackageNotFoundError: Package not found at 'data:application/vnd.openxmlformats-officedocument.presentationml.presentation;base64...
I tried a few different attempts at encoding/decoding the input with StringIO and BytesIO but couldn't get it into a working format.

The data property contains also content type, which should be separated before doing the base64 decoding. Hence the parsing code should be along the lines of,
content_type, content_string = data.split(',')
prs = Presentation(BytesIO(base64.b64decode(content_string)))
Replacing
prs = Presentation(data)
in you example with that parsing code, I am able to parse a pptx file as intended.

Local HTML file won't load properly into Dash application

I've tried to embed a local html file into a basic Dash App.
I used the code in this link and replaced the path with my local relative path (the dash app is in the same folder as the html local page)
html.Iframe(src="random_example.html",
style={"height": "1067px", "width": "100%"})
but this is the result I get:

You could put the html file in the assets folder and reference it like this:
import dash
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div(
children=[
html.Iframe(
src="assets/random_example.html",
style={"height": "1067px", "width": "100%"},
)
]
)
if __name__ == "__main__":
app.run_server(debug=True)

Dash testing dcc.upload with dash.testing

When writing production ready code we want to be able to automatically test our webapp everytime we update the code. Dash for python allows this through dash.testing. However in my app I upload an excel file utilizing the dcc.Upload() component.
How do I write a test that can send the upload link to this component?

The dcc.Upload component does not allow you to put an id on the that stores the upload link.
It is easy to work around this by inspecting the upload button/field that you have created with web developer tools. look for the line that contains "<input type=file ... >". in the elements tab.
Right click it and press copy xpath and it should give you a relative path like //*[#id="upload-data"]/div/input
The test case would look like this
from dash.testing.application_runners import import_app
def test_xxxx001_upload(dash_duo):
# get app from app.py
app = import_app("src.app")
dash_duo.start_server(app)
# find element that contains input link. Utilize the web driver to get the element
element = dash_duo.driver.find_element_by_xpath('//*[#id="upload-data"]/div/input')
element.send_keys("C:\\path\\to\\testData.xlsx")
folder structure
myapp
--src
--app.py
--server.py
--run.py
--tests
--test_app
the use of the dcc.Upload component to create an upload button
import dash_core_components as dcc
import dash_html_components as html
html.Div(
id="file-drop",
children=[
dcc.Upload(
id="upload-data",
children=html.Div(
["Drag and Drop or ", html.A("Select File"),],
id="select-file",
),
multiple=False,
),
html.Div(id="output-data-upload"),
],
)

Call Local CSS files in Dash App

I am attempting to run the Dash Vanguard demo app while hosting the 4 css files locally. I have successfully been able to use a workaround and locally host a single css file in Dash, but have not been able to simultaneously call all 4.
This is the current Vanguard dash app with the css files externally hosted:
external_css =
["https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css",
"https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css",
"//fonts.googleapis.com/css?family=Raleway:400,300,600",
"https://codepen.io/bcd/pen/KQrXdb.css",
"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"]
for css in external_css:
app.css.append_css({"external_url": css})
My attempt at hosting css files locally:
app.scripts.config.serve_locally = True
app.css.config.serve_locally = True
....
app.layout = html.Div([
html.Link(href='/assets/skeleton.min.css', rel='stylesheet'),
html.Link(href='/assets/skelly.css', rel='stylesheet'),
html.Link(href='/assets/normalize.min.css', rel='stylesheet'),
html.Link(href='/assets/font.css', rel='stylesheet'),
dcc.Location(id='url', refresh=False),
html.Div(id='page-content')
])
....
#app.server.route('/assets/<path:path>')
def static_file(path):
static_folder = os.path.join(os.getcwd(), 'assets')
return send_from_directory(static_folder, path)
The app currently loads without any styling. Not sure why it won't load even one of the css files.

I had the same issue loading local files. The problem was in the #app.server.route. I changed it to:
#app.server.route('/static/<path>')
and it worked.
Edit: Starting with Dash 0.22 you now just need to put the css file in an assets folder. See the docs

I'm currently having the same issue so if you find an answer please add it here!... I don't have a solution but here is the research I've done in case you haven't seen any of these:
https://github.com/plotly/dash/pull/171
https://dash.plot.ly/external-resources
https://github.com/plotly/dash-recipes/blob/master/dash-local-css-link.py