Update to File widget for uploading multiple files

[rmkolany]

Link to Issue #347
To help move this issue along I updated the File widget to accept multiple files. I added an argument multiple to allow the user to specify if they would like to allow multiple files to be uploaded. multiple=False by default and should have no impact on users who are using this widget for one file now. filename, filepath, and value output lists if multiple=True. I considered using a different method but wanted to retain the current functionality as much as possible.

File Widget Use with Multiple Files

Input
myFile = mercury.File(label="Upload File Here", multiple=True)

Handling Files After Upload
myFile.filename

['file1_name.ext','file2_name.ext']

myFile.filepath

['path\to\files\temp_dir\file1_name.ext','path\to\files\temp_dir\file2name.ext']

myFile.value

[<memory at 0x0000012345678910>,<memory at 0x0000010987654321>]

myFile.temp_dir

'path\to\files\temp_dir'

I was able to get this to work in my environment without any issues in Jupyter Lab but the file uploader would not accept multiple files in the Mercury UI. It looks like some updates may be needed on the React side of things but I am not familiar with React to make the necessary changes.

[CLAassistant]

All committers have signed the CLA.

[pplonski]

Hi @rmkolany, thanks for PR. I believe that there are needed changes in the frontend code, to make it work. The File widget in the frontend (React code) should use multiple parameter.

[pplonski]

Is it working for you? do you have some screenshots with multiple file upload?

[pplonski]

you can't import package from local paths, because it will not work for other folks

[rmkolany]

I was trying to repackage the repo from local to see if my attempt at changes to the react code would work. On my deployed version hosted on a VM I was able to edit one frontend file to allow multiple files to upload in addition to the changes made to file.py. I edited this file: .\mercury\frontend-dist\static\js\2.206848a5.chunk to change allowMultuple:[!1,Ue.BOOLEAN] to allowMultuple:[!0,Ue.BOOLEAN]. Changing this and clearing the browser cache allowed the widget to accept multiple files at once either via drag & drop or selecting multiple via the file browser.

[rmkolany]

I tried a few different methods including running pip install for my branch and just cloning the repo and running setup.py to build the package. The latter method seems to have worked better but when I go to run mercury I get the 'TemplateDoesNotExist' error in the browser due to the templates and frontend-dist folders not being created. My attempt at changing the React code is within commit 7d78406 by adding the multiple parameter to the file widget. I have never worked in React and will likely need help to get this to work for others.

[pplonski]

Oh, sorry! I should explain it earlier ... You need to build the frontend and copy all html, js, css files into Django directory, here are steps:

# run from main directory

# 1. remove previous frontend static files
rm -rf mercury/frontend-dist
# 2. go to fronted directory
cd frontend
# 3. install required packages
yarn install
# 4. build fronted files and copy them (copy is done in the local-build command)
yarn local-build

After above steps you should see changes in frontend when running mercury locally with command (mercury run).