dccUpload
The dccUpload component allows your app’s viewers to upload files,
like Excel spreadsheets or images, into your application.
Your Dash app can access the contents of an upload by listening to
the contents property of the dccUpload
component.
contents is a base64 encoded string that contains the files contents,
no matter what type of file: text files, images, .zip files,
Excel spreadsheets, etc.
Examples
Find a few usage examples below.
Displaying Uploaded Spreadsheet Contents
Here’s an example that parses CSV or Excel files and displays
the results in a Dash DataTable.
library(dashCoreComponents)
library(dashHtmlComponents)
library(dash)
library(anytime)
app <- Dash$new()
app$layout(htmlDiv(list(
dccUpload(
id='upload-data',
children=htmlDiv(list(
'Drag and Drop or ',
htmlA('Select Files')
)),
style=list(
'width'= '100%',
'height'= '60px',
'lineHeight'= '60px',
'borderWidth'= '1px',
'borderStyle'= 'dashed',
'borderRadius'= '5px',
'textAlign'= 'center',
'margin'= '10px'
),
# Allow multiple files to be uploaded
multiple=TRUE
),
htmlDiv(id='output-data-upload')
)))
parse_contents = function(contents, filename, date){
content_type = strsplit(contents, ",")
content_string = strsplit(contents, ",")
decoded = base64_dec(content_string)
if('csv' %in% filename){
df = read.csv(utf8::as_utf8(decoded))
} else if('xls' %in% filename){
df = read.table(decoded, encoding = 'bytes')
} else{
return(htmlDiv(list(
'There was an error processing this file.'
)))
}
return(htmlDiv(list(
htmlH5(filename),
htmlH6(anytime(date)),
dashDataTable(df_to_list('records'),columns = lapply(colnames(df), function(x){list('name' = x, 'id' = x)})),
htmlHr(),
htmlDiv('Raw Content'),
htmlPre(paste(substr(toJSON(contents), 1, 100), "..."), style=list(
'whiteSpace'= 'pre-wrap',
'wordBreak'= 'break-all'
))
)))
}
app$callback(
output = list(id='output-data-upload', property = 'children'),
params = list(input(id = 'upload-data', property = 'contents'),
state(id = 'upload-data', property = 'filename'),
state(id = 'upload-data', property = 'last_modified')),
function(list_of_contents, list_of_names, list_of_dates){
if(is.null(list_of_contents) == FALSE){
children = lapply(1:length(list_of_contents), function(x){
parse_content(list_of_contents[[x]], list_of_names[[x]], list_of_dates[[x]])
})
}
return(children)
})
app$run_server()
Displaying Uploaded Images
This next example responds to image uploads by displaying them
in the app with the img component.
library(dashCoreComponents)
library(dashHtmlComponents)
library(dash)
library(anytime)
app <- Dash$new()
app$layout(htmlDiv(list(
dccUpload(
id='upload-image',
children=htmlDiv(list(
'Drag and Drop or ',
htmlA('Select Files')
)),
style=list(
'width'= '100%',
'height'= '60px',
'lineHeight'= '60px',
'borderWidth'= '1px',
'borderStyle'= 'dashed',
'borderRadius'= '5px',
'textAlign'= 'center',
'margin'= '10px'
),
# Allow multiple files to be uploaded
multiple=TRUE
),
htmlDiv(id='output-image-upload')
)))
parse_content = function(contents, filename, date){
return(htmlDiv(list(
htmlH5(filename),
htmlH6(anytime(date)),
htmlImg(src=contents),
htmlHr(),
htmlDiv('Raw Content'),
htmlPre(paste(substr(toJSON(contents), 1, 100), "..."), style=list(
'whiteSpace'= 'pre-wrap',
'wordBreak'= 'break-all'
))
)))
}
app$callback(
output = list(id='output-image-upload', property = 'children'),
params = list(input(id = 'upload-image', property = 'contents'),
state(id = 'upload-image', property = 'filename'),
state(id = 'upload-image', property = 'last_modified')),
function(list_of_contents, list_of_names, list_of_dates){
if(is.null(list_of_contents) == FALSE){
children = lapply(1:length(list_of_contents), function(x){
parse_content(list_of_contents[[x]], list_of_names[[x]], list_of_dates[[x]])
})
} else{
}
return(children)
}
)
app$run_server()
Styling the Upload Component
The children attribute of the Upload component accepts any
Dash component. Selecting the child element triggers the
upload action, as does dragging and dropping files.
Here are three different ways you can style the Upload
component using standard Dash components.
library(dashCoreComponents)
library(dashHtmlComponents)
library(dash)
app <- Dash$new()
app$layout(htmlDiv(list(
dccUpload(htmlButton('Upload File')),
htmlHr(),
dccUpload(htmlA('Upload File')),
htmlHr(),
dccUpload(list(
'Drag and Drop or ',
htmlA('Select a File')
), style=list(
'width'= '100%',
'height'= '60px',
'lineHeight'= '60px',
'borderWidth'= '1px',
'borderStyle'= 'dashed',
'borderRadius'= '5px',
'textAlign'= 'center'
))
)))
app$run_server()
Upload Properties
Our recommended IDE for writing Dash apps is Dash Enterprise’s
Data Science Workspaces,
which has typeahead support for Dash Component Properties.
Find out if your company is using
Dash Enterprise.
children (unnamed list of or a singular dash component, character or numeric | character; optional):
Contents of the upload component.
id (character; optional):
The ID of this component, used to identify dash components in
callbacks. The ID needs to be unique across all of the components in
an app.
contents (character | unnamed list of characters; optional):
The contents of the uploaded file as a binary string.
filename (character | unnamed list of characters; optional):
The name of the file(s) that was(were) uploaded. Note that this does
not include the path of the file (for security reasons).
last_modified (numeric | unnamed list of numerics; optional):
The last modified date of the file that was uploaded in unix time
(seconds since 1970).
accept (character; optional):
Allow specific types of files. See
https://github.com/okonet/attr-accept for more information. Keep in
mind that mime type determination is not reliable across platforms.
CSV files, for example, are reported as text/plain under macOS but as
application/vnd.ms-excel under Windows. In some cases there might not
be a mime type set at all. See:
https://github.com/react-dropzone/react-dropzone/issues/276.
disabled (logical; default FALSE):
Enable/disable the upload component entirely.
disable_click (logical; default FALSE):
Disallow clicking on the component to open the file dialog.
max_size (numeric; default -1):
Maximum file size in bytes. If -1, then infinite.
min_size (numeric; default 0):
Minimum file size in bytes.
multiple (logical; default FALSE):
Allow dropping multiple files.
className (character; optional):
HTML class name of the component.
className_active (character; optional):
HTML class name of the component while active.
className_reject (character; optional):
HTML class name of the component if rejected.
className_disabled (character; optional):
HTML class name of the component if disabled.
style (named list; optional):
CSS styles to apply.
style_active (named list; default { borderStyle: 'solid', borderColor: '#6c6', backgroundColor: '#eee',}):
CSS styles to apply while active.
style_reject (named list; default { borderStyle: 'solid', borderColor: '#c66', backgroundColor: '#eee',}):
CSS styles if rejected.
style_disabled (named list; default { opacity: 0.5,}):
CSS styles if disabled.
loading_state (named list; optional):
Object that holds the loading state object coming from dash-renderer.
loading_state is a named list with keys:
-
component_name(character; optional):
Holds the name of the component that is loading. -
is_loading(logical; optional):
Determines if the component is loading or not. -
prop_name(character; optional):
Holds which property is loading.