Upload after confirmation and progress bar


#1

Hi,

haha, it’s me again.

Q1: In the dcc.Upload component case, everything dropped into the component will be immediately uploaded to the server side (in property contents of dcc.Upload) when you uploading something. But in my current project, we would like to upload something after a confirmation, let’s say a callback fired by a button. Is there any possibility to do it in the right way in dash?

Q2: If so, would that be possible to create a progress bar to show the progress in uploading? It’s a open topic, I will appreciate it if someone could tell me how you do this in flask and embedded into the Dash framework.

Thank you so much for your reading. It’s time for you to hack!

VG
Zhiwei


#2

Hm, you might be able to set the upload contents as dash.dependencies.State and set a confirmation button as dash.dependencies.Input so that your callback is only fired on button click (but the contents of the upload are still sent). See https://plot.ly/dash/state for an example of State.

This isn’t possible on a per-component basis, but you can add a general loading state with what is outlined here: 📣 Dash Loading States.


#3

@chriddyp
thx for your quick answer.

Lets assume that someone would like to upload some super large files (> 1GB, is there memory overflow risk? cz contents is a list of string not stream, but actually it doesn’t seems to work in version 0.15.0 rc1, we use this version cz we need both Tab and Upload).

They dropped that to the Upload, is there any way to list all these files again before upload to contents, in order to check if they are correct files to upload? Otherwise the Upload component will be blocked by the large files immediatly.


#4

It will probably crash their browser before it crashes your server.

Check out the upload component docs here: https://plot.ly/dash/dash-core-components/upload, you might be interested in setting the max_size property. You can always block requests that are above a certain size on the server side as well with something like nginx.

You can create a callback with the filename property of the upload component as the dash.dependencies.Input and update another component to display those filenames.


#5

@chriddyp

Thx for your reply.

Check out the upload component docs here: https://plot.ly/dash/dash-core-components/upload, you might be interested in setting the max_size property. You can always block requests that are above a certain size on the server side as well with something like nginx.

As you said, we already set the max_size to -1, however the large file still get ignored when it is larger than 100MB approximately. But it may be because we use a development version 0.15.0-rc1.

You can create a callback with the filename property of the upload component as the dash.dependencies.Input and update another component to display those filenames.

But it will still directly upload files to the server side as soon as you get the filename property of Upload, even though you haven’t use the contents property, right?


#6

See Show And Tell -- Dash Resumable Upload for a new approach to uploading very large files :tada: