Black Lives Matter. Please consider donating to Black Girls Code today.

Uploading multiple PDF pages on Dash

I have been using the upload component to try to load a pdf onto dash. I can load only load the first page, is there any way to upload all the pages?

import datetime

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.scripts.config.serve_locally = True

app.layout = html.Div([
dcc.Upload(
id=‘upload-image’,
children=html.Div([
'Drag and Drop or ',
html.A(‘Select Files’)
]),
style={
‘width’: ‘100%’,
‘height’: ‘60px’,
‘lineHeight’: ‘60px’,
‘borderWidth’: ‘1px’,
‘borderStyle’: ‘dashed’,
‘borderRadius’: ‘5px’,
‘textAlign’: ‘center’,
‘margin’: ‘10px’
},
# Allow multiple files to be uploaded
multiple=True
),
html.Div(id=‘output-image-upload’),
])

def parse_contents(contents, filename, date):
return html.Div([
html.H5(filename),
html.H6(datetime.datetime.fromtimestamp(date)),

    # HTML images accept base64 encoded strings in the same format
    # that is supplied by the upload
    html.Img(src=contents),
    html.Hr(),
    html.Div('Raw Content'),
    html.Pre(contents[0:200] + '...', style={
        'whiteSpace': 'pre-wrap',
        'wordBreak': 'break-all'
    })
])

@app.callback(Output(‘output-image-upload’, ‘children’),
[Input(‘upload-image’, ‘contents’),
Input(‘upload-image’, ‘filename’),
Input(‘upload-image’, ‘last_modified’)])
def update_output(list_of_contents, list_of_names, list_of_dates):
if list_of_contents is not None:
children = [
parse_contents(c, n, d) for c, n, d in
zip(list_of_contents, list_of_names, list_of_dates)]
return children

app.css.append_css({
‘external_url’: ‘https://codepen.io/chriddyp/pen/bWLwgP.css
})

if name == ‘main’:
app.run_server(debug=True)

1 Like