Hello, I’m still new to dash. I am trying to upload multiple images to my server but this code only registers one image and also, uploading(2 images) take a very long time. not sure what I am doing wrong in the code.
Any help would be much appreciated. Thanks
import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
#import dash_table_experiments as dt
import datetime
import base64
import json
import pandas as pd
import plotly
import io
import numpy as np
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):
return html.Div([
# 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:2] + '...', style={
'whiteSpace': 'pre-wrap',
'wordBreak': 'break-all'
})
])
@app.callback(Output('output-image-upload', 'children'),
[Input('upload-image', 'contents')])
def update_output(list_of_contents):
print(np.array(list_of_contents.split(',')).shape)
if list_of_contents is not None:
import base64
from base64 import decodestring
cont=np.array(list_of_contents.split(','))
num=cont.shape
for i in range(0,num[0]):
with open("./foo_(%d).jpg"% i,"wb") as f:
f.write(decodestring(list_of_contents[list_of_contents.find(",")+i:].encode('ascii')))
children = [parse_contents(c) for c in list_of_contents]
return children
app.css.append_css({
'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})
if __name__ == '__main__':
app.run_server(debug=True)
For some reason the code in your callback was treating the input as a string, but was getting a list as input, so was breaking. I re-wrote the function with what I think is the same logic. After doing that the image upload seems to work fine. Couldn’t see any significant lag, even for a number of reasonably large photos.
Multiple uploads is working too. The only potential gotcha is that you either have to drag multiple images or select multiple images in the dialogue – you can’t queue up successive images for uploading in one batch; the callback will be triggered as soon as you drag the first one.
Here’s the code:
import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
#import dash_table_experiments as dt
import datetime
import json
import pandas as pd
import plotly
import io
import numpy as np
from base64 import decodestring
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):
return html.Div([
# 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[:100] + '...', style={
'whiteSpace': 'pre-wrap',
'wordBreak': 'break-all'
})
])
@app.callback(Output('output-image-upload', 'children'),
[Input('upload-image', 'contents')])
def update_output(images):
if not images:
return
for i, image_str in enumerate(images):
image = image_str.split(',')[1]
data = decodestring(image.encode('ascii'))
with open(f"image_{i+1}.jpg", "wb") as f:
f.write(data)
children = [parse_contents(i) for i in images]
return children
app.css.append_css({
'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})
if __name__ == '__main__':
app.run_server(debug=True)
I’m not sure if its my dash but the for loop has the compiler complaining about /test_upload.py", line 65, in update_output
image = image_str.split(’,’)[1]
IndexError: list index out of range
image_str. seems to be individual elements of the first image string
Hmm, it sounds like when run in your environment, that callback is getting a string as in input rather than a list, which is how your version of the callback was working. do you have the latest version of dash-core-components? (and possibly best to check the other dash libraries also)