How to display FileUpload widget, choose files, process them and display results in a jupyter notebook app

Notebook
1

My question is related to https://discourse.jupyter.org/t/how-to-transform-a-jupyter-notebook-into-a-webapp/758/13
I would like to make a jupyter web app so that:

  1. I display a FileUpload widget
  2. Choose and upload multiple files
  3. Process the uploaded files
  4. Display results like plots, data (as on a dashboard)
    So far, I’m able to display the widget but all processing and plotting cells, that depend on the widget’s data are run before the files are chosen and loaded via the widget.
    An way to achieve this?
2

I don’t know how fancy you are trying to make this or how soon you need it. I tried to make something similar with Voila and kept getting stuck making drag-n-drop multiple file upload work despite there being documented support for it now in the widgets library. I was just probably missing something I needed to activate or enable. The closest example I had come across is the ‘render-stl’ example at the Voila gallery. (That example is very close to what you seem to be trying to do as well.) Sadly, that is only a single file that gets uploaded, and I couldn’t figure out how to expand the allowed types of files. So I just used JupyterLab which supports drag and drop and made a notebook that opened by default and guided user through steps. The repo where you can also launch it from via MyBinder is here.

Looking forward to hearing what others have to say.

3

Hi @gtex,

I’ve created an open-source framework called Mercury exactly to solve your problem.

With Mercury, you can convert the Jupyter Notebook into a web app by adding YAML configuration in the first RAW cell.

The Mercury is open-source with code availabe at GitHub - mljar/mercury: Mercury: easily convert Python notebook to web app and share with others

With Mercury you can easily deploy the notebook-app to any cloud. I’ve created step-by-step tutorials for Heroku and AWS EC2: Home · mljar/mercury Wiki · GitHub

Recently, I’ve added a file upload widget, so exactly what you needed. Here you have the example notebook with explanations how to transform notebook to web app with file upload widget File upload widget in Jupyter Notebook web app | MLJAR

If you have any further questions or need help, just let me know! :slight_smile:

Cheers,
Piotr