Show And Tell -- Dash Resumable Upload

Dash Python
1

I made a new dash upload component (https://github.com/rmarren1/dash-resumable-upload).
I found that the one in dash core components was good, but it stores the uploaded data in the component itself, which is bad news if you want to upload a very big file since it will crash the users web browser.
This one chunks the file in the front end and sends small pieces to a new endpoint that is added to to the dash app.server using an included decorator function. Then whatever data the user uploads will be in a folder in the server side, and the component will only store the names of files, which you can use to load the files from disk. It is essentially a dash wrapper for the resumable.js file uploader, so there are a lot of fun extras you can play with, like a max files uploaded setting, max file sizes, setting accepted file extensions, pausing uploads, resuming uploads, multiple simultaneous uploads, canceling uploads.

Checkout the usage.py in the repo for an idea of how it works, and check out the codepen linked to in usage.py and fork it if you want to change how it looks.

I have tested this for 1 gb files and it worked great, I hope someone finds it useful.
Best,
Ryan

14 Likes
2

Wow, this is amazing! 1GB uploads!

Thanks a ton for sharing :trophy:

3

Have you uploaded this to PyPI or do we need to install it locally?

4

I put it up on PyPi, so you can pip install dash-resumable-upload. I’ll get more detailed documentation on github when I get a chance, but looking at usage.py and looking at src/components/Upload.py to see the properties that you can change.

1 Like
5

In case that could help anyone: If you run into problems with the pip version, see https://github.com/rmarren1/dash-resumable-upload/issues/1 for now.

6

What would be the best way to handle the file uploaded with Dash Resumable Upload when the process completes? In other words, how can I get e.g. filename of the uploaded file when upload is finished? I could not find any particular event.

7

@rnarren1 Hey , First thank you. I was exactly looking for something like this. But when I try to run it I got the error :

Traceback (most recent call last):
File “/home/raphael/.pycharm_helpers/pydev/pydevd.py”, line 1741, in
main()
File “/home/raphael/.pycharm_helpers/pydev/pydevd.py”, line 1735, in main
globals = debugger.run(setup[‘file’], None, None, is_module)
File “/home/raphael/.pycharm_helpers/pydev/pydevd.py”, line 1135, in run
pydev_imports.execfile(file, globals, locals) # execute the script
File “/home/raphael/.pycharm_helpers/pydev/_pydev_imps/_pydev_execfile.py”, line 18, in execfile
exec(compile(contents+"\n", file, ‘exec’), glob, loc)
File “/tmp/pycharm_project_160/playground/ELManager.py”, line 132, in
},maxFiles=100,#multiple=True
File “/usr/local/lib/python3.5/dist-packages/dash/development/base_component.py”, line 324, in wrapper
return func(*args, **kwargs)
TypeError: init() got multiple values for argument 'maxFiles’

What did I wrong? I installed the package via pip install and used your example here : https://github.com/rmarren1/dash-resumable-upload/blob/master/usage.py

8

I LOVE Ryan’s resumable upload component (I’m using it to prevent server timeouts when uploading files to a Heroku-hosted Dash app), but it seems that the component is broken with Dash’s recent move to React 16. I don’t think Ryan is maintaining his component any longer. I’d like to attempt to update ‘dash-resumable-upload’ after getting some JavaScript and React experience, but right now would anybody else like to take a stab at updating it? I think the relevant incompatibilities might be covered in Chris Parmer’s post: https://github.com/plotly/dash/issues/469

Thanks!

9

Same here, would love it if someone knew how to fix this component.

10

A React-16-compatible version of Ryan’s resumable upload component was updated by my colleague:

Enjoy!

3 Likes
11

Nice! thanks for keeping this component up to date :slight_smile:

12

Hi

I would like to use the dash_resumable_upload component but I get the following error in my console from the web browser:
bundle.v0_0_3m1529439730.js:1 Uncaught TypeError: Cannot read property 'number' of undefined

So I compared bundle.v0_0_3m1529439730.js the with the bundle.js in this repository. I have noticed that my file (I downloaded the component through PyCharm) and the bundle.js are slightly different. How can I fix this because for the project I am working on, it is required to upload files around 1 GB.

My version:

image
image1085×303 10 KB

Left my bundle.js, on the right the one from the github repository

image
image1656×440 40.9 KB

Thanks in advance

Kind regards,
Sarah

13

[update]

After a little searching I installed the package from your git respository so I have now the 0.0.4 version. Only, when I wanted to try it out, it still did not work. In the end, I saw that in the init.py file this is written

_js_dist = [
    {
        "relative_package_path": "bundle.js",
        "external_url": (
            "https://unpkg.com/dash-resumable-upload@{}"
            "/dash_resumable_upload/bundle.js"
        ).format(__version__),
        "namespace": "dash_resumable_upload"
    }
]

https://unpkg.com/dash-resumable-upload@0.0.4/dash_resumable_upload/bundle.js Does not exists, only https://unpkg.com/dash-resumable-upload@0.0.3/dash_resumable_upload/bundle.js

So is this why I see still bundle_v0_0_3.js in the console instead of the 0.0.4 version bundle.js?

How can I fix this?

Thanks in advance

14

I’ll contact my colleague and see if he can take a look at his updated version of the resumable upload component!

1 Like