As a workaround to upload multiple files I added a second upload widget in my app. The dash_uploder, that has the advantage of being compatible with bigger files and has a progress bar. However, I cannot get both widgets side by side. They are always on top of each other.
I tired adding style={'display': 'inline-block'}to both widgets but that did not help.
...
dcc.Upload(
id='ms-upload',
children=html.Div([
html.A('''Click here or drag and drop to upload mzML/mzXML files here.
You can upload up to 10 files at a time.''', style={'margin': 'auto', 'padding': 'auto'})
]),
style={
'width': '48%',
'height': '120px',
'lineHeight': '120px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center',
'margin': '0px',
},
# Allow multiple files to be uploaded
multiple=True),
html.Div( du.Upload(id='ms-upload-zip', filetypes=['tar', 'zip'],
upload_id=uuid.uuid1(),
text='Click here to drag and drop ZIP/TAR compressed archives'),
style={
'textAlign': 'center',
'width': '48%',
'padding': '0px',
'display': 'inline-block',
}),
...
This is how my current layout looks like.
