Show And Tell -- Dash Resumable Upload

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

13 Likes

Wow, this is amazing! 1GB uploads!

Thanks a ton for sharing :trophy:

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

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

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.

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.

@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

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!

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

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

Enjoy!

2 Likes

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