# Upload after confirmation and progress bar

**URL:** https://community.plotly.com/t/upload-after-confirmation-and-progress-bar/7172
**Category:** Dash Python
**Created:** [December 5, 2017, 11:08pm UTC](https://community.plotly.com/t/upload-after-confirmation-and-progress-bar/7172 "2017-12-05T23:08:29Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![356255531](https://avatars.discourse-cdn.com/v4/letter/3/77aa72/32.png) [@356255531](https://community.plotly.com/u/356255531)
#### Post date: [December 5, 2017, 11:08pm UTC](https://community.plotly.com/t/upload-after-confirmation-and-progress-bar/7172/1 "2017-12-05T23:08:29Z")

</div>

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

---

<div class="post-metadata">

### Author: ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)
#### Post date: [December 5, 2017, 11:14pm UTC](https://community.plotly.com/t/upload-after-confirmation-and-progress-bar/7172/2 "2017-12-05T23:14:40Z")

</div>

> [@356255531](#):
>
> 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?

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 [Part 2. Basic Callbacks | Dash for Python Documentation | Plotly](https://plot.ly/dash/state) for an example of `State`.

> [@356255531](#):
>
> If so, would that be possible to create a progress bar to show the progress in uploading?

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](https://community.plotly.com/t/mega-dash-loading-states/5687).

---

<div class="post-metadata">

### Author: ![356255531](https://avatars.discourse-cdn.com/v4/letter/3/77aa72/32.png) [@356255531](https://community.plotly.com/u/356255531)
#### Post date: [December 5, 2017, 11:39pm UTC](https://community.plotly.com/t/upload-after-confirmation-and-progress-bar/7172/3 "2017-12-05T23:39:58Z")

</div>

@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.

---

<div class="post-metadata">

### Author: ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)
#### Post date: [December 5, 2017, 11:45pm UTC](https://community.plotly.com/t/upload-after-confirmation-and-progress-bar/7172/4 "2017-12-05T23:45:08Z")

</div>

> [@356255531](#):
>
> \> 1GB

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

Check out the upload component docs here: [Upload | Dash for Python Documentation | Plotly](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`.

> [@356255531](#):
>
> is there any way to list all these files again before upload to contents

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.

---

<div class="post-metadata">

### Author: ![356255531](https://avatars.discourse-cdn.com/v4/letter/3/77aa72/32.png) [@356255531](https://community.plotly.com/u/356255531)
#### Post date: [December 6, 2017, 8:27am UTC](https://community.plotly.com/t/upload-after-confirmation-and-progress-bar/7172/5 "2017-12-06T08:27:57Z")

</div>

@chriddyp

Thx for your reply.

> Check out the upload component docs here: [Upload | Dash for Python Documentation | Plotly](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?

---

<div class="post-metadata">

### Author: ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)
#### Post date: [April 7, 2018, 10:57pm UTC](https://community.plotly.com/t/upload-after-confirmation-and-progress-bar/7172/6 "2018-04-07T22:57:36Z")

</div>

See [Show And Tell -- Dash Resumable Upload](https://community.plotly.com/t/show-and-tell-dash-resumable-upload/9519) for a new approach to uploading _very_ large files 🎉
