Drag and Drop FileInput Widget

[MarcSkovMadsen]

Feature Request - Drag and Drop FileInput Widget

It would be nice to be able to drag and drop files onto a area for upload instead of the more tedious process of the current fileupload.

Something like the one in Streamlit

Or in Dash

Additional Context

The request is based on the experience from the Image Classification app I've add to the galleries at awesome-streamlit.org and awesome-panel.org.

It's simply a better experience, much faster, more interactive and more fun to be able to drag and drop files instead of the current process of clicking and selecting.

Streamlit

Panel

[MarcSkovMadsen]

If it was possible to set the uploaded image as the background image of the drag and drop area it would actually be awesome.

[MarcSkovMadsen]

Any news on this one? I think this is a fundamental one. I can just see how users of apps developed in alternative frameworks are able to drag and drop files from mail and chat into their apps.

[MarcSkovMadsen]

We can create a quick fix by adding the css below to the Panel stylesheet and describing how to use it in the Reference Guide.

.pnx-file-upload-area input[type=file] {
    width: 100%;
    height: 100%;
    border: 3px dashed #9E9E9E;
    background: #f8f8f8;
    border-radius: 5px;
    text-align: left;
    margin: auto;
}

For me this would be an acceptable long term solution. Of course it would be nice if the button looked nicer. But that includes a new Bokeh model and more js dependencies.

@philippjfr . Let me know if you would accept a PR on this. And please also tell me where in the Panel repo I can find that stylesheet. I cannot find it from version 0.10.0.

How it looks

Additional Context

The dropzone.js style uses the background background: #EEEEEE; which is a little darker. I've chosen background: #f8f8f8; to make it consistent with markdown code sections. But I actually think the #EEEEEE background catches the eye a bit more.

[MarcSkovMadsen]

I would like the FileInputArea to be able to show the file uploaded. Either as a preview (without sending to server) or as a panel that the user can populate with what ever he wants.

Something like this :-)

https://user-images.githubusercontent.com/42288570/146669572-54513497-fde0-45fb-b4ba-a8cb211f40b2.mp4

[nascifMode]

+1, I am building an app using the FileInput widget and the first comment I got from my internal customers is that they would rather be able to drop the file than navigate to find it.

[MarcSkovMadsen]

They can actually drop onto the button. But it's not obvious.

[nascifMode]

Not at all. :) Also not documented. Adding a note about it being supported in https://panel.holoviz.org/reference/widgets/FileInput.html would be helpful. But ideally the widget itself should communicate that possibility. Maybe a tooltip?

[philippjfr]

The FileDropper widget addresses this.