Add FileInputArea

[MarcSkovMadsen]

The look and feel of the current FileInput is not on par with alternative frameworks.

Alternative Frameworks provides a nicely styled FileInputArea that favors drag and drop over click to open and then choose. Drag and drop provides a much faster experience when you want to quickly explore different files. You can actually drag and drop onto our FileInput, but its not obvious. You can also style it to an area, but not hide the old school button.

JS Libraries that that might be used

• Dropzone most welknown drag and drop file uploader. MIT licensed.
• FilePond looks powerful, is MIT licensed and has 13800 stars on github. Image preview is via Pintura which is by the same company and commercial.
• Uppy lots of interesting possibilities like file upload from web cam, dropbox, google drive etc. MIT licensed and 27k stars on github. Seems to be relatively tightly connected to sas file upload services.

Reference From Scratch Implementations

• Perspective provides an implementation here https://perspective.finos.org/block/?example=csv
• There is a vanilla implementation with preview and progress reporting here https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/
• This implementation contains nice icons https://stackabuse.com/upload-file-with-vanilla-javascript-and-loading-animation/

Drag and Drop Layout

It might also be possible to make the FileInputArea a drag and drop layout. Something that enables users to drag an image, csv file etc. onto an area and then quickly displays it (via a Pane?) in that area.

I have an implementation of that for image files here https://github.com/MarcSkovMadsen/paithon/tree/master/src/paithon/image/widgets

Its used in the below application. As you can see this allows very fast ML workflows with a great user experience.

I've tried a few times to generalize this. I would like it to support display files in general by using a pane and some transformation either built into the drag and drop widget or specified by the user. Something preferably working on the client side as if you drop a large file (for example video) it takes a long time to load to the server and back to the client in another pane. It would be nice to avoid that double transfer.

This becomes even harder to generalize if you allow multiple files to be uploaded and maybe even of different formats. Then you need to support a gallery with navigation.

You could even extend this further and add editing functionality such that you could edit the image before you press a button to upload the image to the server.

Possibilities

• drag and drop onto a pane (DragNDrop layout)
• single or multiple files
• preview before upload
• transform before upload (for example transforming images to 480x640 or similar to minimize size uploaded to a server and the processing power used by the server. This is relevant for ML use cases)
• edit before upload
• Specialized widgets like ImageFileInputArea, VideoFileInputArea, TabularFileInputArea for each media type.

Examples

Streamlit

In their issue 6754 they are currently working on using file upload endpoints.

Gradio

https://gradio.app/docs/#file

Also provides specialized input widgets for different media like image

https://gradio.app/docs/#image

[ahuang11]

Would like to bump this; I think there's immense value for this, especially for Stable Diffusion examples and such.

Here's how Ragna implemented it using ReactiveHTML: https://github.com/Quansight/ragna/blob/b2730f1dd2b7285a13301cb3e8a7936eca7bd0bb/ragna/deploy/_ui/components/file_uploader.py