Skip to content

Upload box components

Simple wrapper around the dcc Upload component. Freezes as shown below some of the parameters:

def upload_box(id: str,
               label: str,
               multiple: bool,
               style: dict[str, str] | None = None
               ) -> dcc.Upload:
    """
    Returns an upload box
    """
    return dcc.Upload(id=id, multiple=multiple, style=style or DEFAULT_STYLE,
                      children=html.H5(label, style={'display': 'flex',
                                                     'justifyContent': 'center',
                                                     'alignItems': 'center',
                                                     'textAlign': 'center'}))

DEFAULT_STYLE is as follow:

DEFAULT_STYLE = {'height': '30vh',
                 'lineHeight': '60px',
                 'borderWidth': '1px',
                 'borderStyle': 'dashed',
                 'borderRadius': '10px',
                 'textAlign': 'center',
                 'margin': 'auto',
                 'color': '#A0AEC0',
                 'verticalAlign': 'middle'}

Rendering:

Upload box

An example of such a component in a dash application