File drop highlight

[vincchan]

Hey @nextcloud/designers

I'm creating this PR to let you know that I'm working on a visual indication for the file-upload by drag&drop and wanted your opinion on the current status. I also updated the File Upload Plugin to 9.12.5 (apps/files/js/jquery.fileupload.js) to support dragleave event.

We have, like many services, the ability to drag and drop a file directly from the filesystem of the OS to the browser to upload it to Nextcloud, though we do not currently intuitively show it in the UI.

This fixes it.

• Improve UI further based on feedback
• Adjust CSS to make it work for all sizes
• Fix jQuery Plugin to make it uploading directly into a folders work again

[MorrisJobke]

@vincchan Generally I like this :) Could you also try to include a different indicator if the file is dropped into a subfolder (then only highlight the row. Beside that this rocks 🚀 Thanks!

[vincchan]

@MorrisJobke Good point! I just noticed though that by upgrading the jQuery Plugin it does not let you upload files into folders directly anymore. Need to have a look at that.

[mikebabb]

@vincchan This looks great! Simple, intuitive, exactly as it ought to be. Nice work!

[williambargent]

I agree with @MorrisJobke it would be great to grab directly into subfolders.
Is there currently the ability to drag file which have been uploaded to move in and out of folders? That would be useful.

[vincchan]

@williambargent The functionality to upload to folders directly is already present, I just broke by the updated jQuery Plugin which I now fixed. I recommend you to open up an issue for your request :)

[jancborchardt]

Nice @vincchan! You could also change the emptycontent icon to folder-drag-accept. Or when dragged into a subfolder, change that icon.

[vincchan]

@MorrisJobke @jancborchardt thanks for the feedback! It now detect when the user is dragging a file over a directory and changes the thumbnail to folder-drag-accept.svg

[williambargent]

👍

[jancborchardt]

It now detect when the user is dragging a file over a directory and changes the thumbnail to folder-drag-accept.svg

Very nice! Maybe something for a different pull request, but for completeness sake, can you also make sure this happens for:

• the empty content icon for an empty folder
• the folder icons in a folder shared by link
• the empty content icon for an empty folder shared by link :)

[MorrisJobke]

Hardcoded URL ;) And the file is also missing in this PR ;)

[jancborchardt]

Please don’t duplicate the file »folder-drag-accept.svg« ;)

Best would be to create a class in core/css/icons.css like so:

.icon-filetype-folder-drag-accept {
    background-image: url('../img/filetypes/folder-drag-accept.svg');
}

Then simply the class can be switched.

[vincchan]

@nextcloud/designers alright PR is ready to review. Thanks for all the feedback!

Here is a demo

[vincchan]

@jancborchardt I'll open up a PR for the empty content icons when I get around to do that :)

[MorrisJobke]

I tested this and it works really nice :) Thanks for this

Tested in Chrome, Firefox and Safari

[MorrisJobke]

👍

[MorrisJobke]

@Mar1u5 Do you want to review this nice feature? :)

[MariusBluem]

Nice 👍

[LukasReschke]

Awesome stuff, @vincchan!!!! 🚀