dash (version 0.9.4)

dccUpload: Upload component

Description

Upload components allow your app to accept user-uploaded files via drag'n'drop

Usage

dccUpload(children=NULL, id=NULL, contents=NULL, filename=NULL,
last_modified=NULL, accept=NULL, disabled=NULL,
disable_click=NULL, max_size=NULL, min_size=NULL,
multiple=NULL, className=NULL, className_active=NULL,
className_reject=NULL, className_disabled=NULL, style=NULL,
style_active=NULL, style_reject=NULL, style_disabled=NULL,
loading_state=NULL)

Arguments

children

A list of or a singular dash component, string or number | character. Contents of the upload component

id

Character. 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 | list of characters. The contents of the uploaded file as a binary string

filename

Character | list of characters. 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 | list of numerics. The last modified date of the file that was uploaded in unix time (seconds since 1970).

accept

Character. 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. Enable/disable the upload component entirely

disable_click

Logical. Disallow clicking on the component to open the file dialog

max_size

Numeric. Maximum file size in bytes. If `-1`, then infinite

min_size

Numeric. Minimum file size in bytes

multiple

Logical. Allow dropping multiple files

className

Character. HTML class name of the component

className_active

Character. HTML class name of the component while active

className_reject

Character. HTML class name of the component if rejected

className_disabled

Character. HTML class name of the component if disabled

style

Named list. CSS styles to apply

style_active

Named list. CSS styles to apply while active

style_reject

Named list. CSS styles if rejected

style_disabled

Named list. CSS styles if disabled

loading_state

Lists containing elements 'is_loading', 'prop_name', 'component_name'. those elements have the following types: - is_loading (logical; optional): determines if the component is loading or not - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer

Value

named list of JSON elements corresponding to React.js properties and their values

Examples

# NOT RUN {
if (interactive()) {
    library(dash)
    library(jsonlite)

    app <- Dash$new()

    app$layout(htmlDiv(list(
      dccUpload(
        id='upload-image',
        children=htmlDiv(list(
          'Drag and Drop or ',
          htmlA('Select Files')
        )),
        style=list(
          '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(as.POSIXct(date, origin="1970-01-01")),
        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) && !is.null(list_of_names) && !is.null(list_of_dates[[1]])) {
          children = lapply(1:length(list_of_contents), function(x){
            parse_content(list_of_contents[[x]], list_of_names[[x]], list_of_dates[[x]])
          })
        }
        else {
          children = "Upload a file to see the raw data."
        }
        return(children)
      }
    )

  app$run_server()
}
# }