Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Uploading multiple images

Dash
#1

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)
#2

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)
2 Likes
#3

Hello, thanks for the reply

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

#4

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)

#5

Too cool, it works perfectly now.

Yes I had an older version of dash-core-components.
Thanks

1 Like