search

virtualmin / virtualmin-gpl

Virtualmin web hosting control panel for Webmin
https://www.virtualmin.com
GNU General Public License v3.0
329 stars 102 forks source link

RFE: Direct drag and drop upload to the File Manager view (even without the File menu) #582

Open nekohayo opened 1 year ago

nekohayo commented 1 year ago

I've been trying out the "File Manager" functionality in Virtual Min 7's web UI, and it is pretty cool and modern! It supports drag and drop for files using the "File > Upload to current directory" menu action.

However, it doesn't handle that directly in the folder's main view.

I have the intuitive habit of dragging and dropping directly there, and what happens then (with Firefox, at least) is that it tries to load the dropped files as if they were a URL to load by the browser, instead of handling a drag action in that view.

It would be fantastic if it could support drag-and-drop upload of multiple files (or even directories) to the main folder view, i.e. show a visual indication of drop target in the main canvas of files when a drag&drop is initiated towards the browser window, without needing to use the "File" menu everytime. For simple uploads, it would be faster and more convenient to be able to do this directly in the view, rather than needing to bring up a dedicated UI for it (which I understand can be useful for more complex uploads).

Even for slightly more complex uploads, it suppose it could be handled that way too; for example, when uploading a compressed archive, the UI could prompt the user "after the drop" to ask whether they want to upload the archive "as is" or if they want it to be decompressed into that folder.

iliajie commented 1 year ago

Hello,

It could be implemented, and it sounds like a good improvement to me. However, it might be tricky .. maybe, I think .. I will have a look ..

nekohayo commented 7 months ago

I have also noticed that even the dedicated file upload dialog's "drag and drop target area" is very small, it is not the whole dialog, that's something that could be improved too.

In any case, in addition to your existing code, maybe this can be useful as general reference: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#specifying_drop_targets

iliajie commented 7 months ago

I have also noticed that even the dedicated file upload dialog's "drag and drop target area" is very small,

It's not that small; actually, it appears quite large to me, and the drop-down area is emphasized with dashed lines:

image

In any case, in addition to your existing code, maybe this can be useful

Changing the color of the dropdown area when the mouse enters it is a good idea. I'll look into implementing that..

nekohayo commented 7 months ago

It's not that small; actually, it appears quite large to me, and the drop-down area is emphasized with dashed lines

Yeah, though when I'm drag and dropping, I'm typically doing that from another monitor or doing it "instinctively", without looking too precisely, so I'm "throwing" the files at it from across the screen. It would be nicer if the whole page was the target, I don't see you'd want to artificially limit the drop target to that rectangle, it's not like there are other drag and drop actions that can happen in this GUI anyway :)

iliajie commented 1 month ago

I will add this to my to-do list to try to support drag and drop on the whole page. However, you should keep in mind that this feature is quite minor, yet not simple to implement in terms of time.