Drag and Drop hint in a Media Folder

[marcemarc]

Which Umbraco version are you using? (Please write the exact version, example: 10.1.0)

v15.2.1

Bug summary

This might be a clever thing on purpose to make the media section look swish, but this got reported as an issue with editors not able to 'bulk upload' images into the media section...

but they can!

If you look at the empty folder screen in V15

Then all the editors need to do is 'drag' their bulk images from desktop onto the 'No Items' label

If they do that, then they'll get some encouragement that all is ok, and they get more helpful 'drag and drop your files into this area'

but how would they know? they'd know? I don't know??

In V13, well, we were positively imploring them to drag and drop their files:

I don't know why the editors when the hit v15, didn't try that, especially the ones that knew v13....

I can understand the more minimalist approach here - but does it make Umbraco seem more aloof? one option might be to update the friendly cms tagline to be the slightly aloof sometimes cms... (sorry I didnt' mean to make this a running joke thing I do on each issue, it is just trademarcemarc silliness!)

Specifics

No response

Steps to reproduce

Create an empty folder in the Media section
Go to drag a batch of images into the folder
but pause and wonder 'if you can'?

Expected result / actual result

I think it would be friendly to have some indication it's possible to drag files here in the empty folder?

[github-actions]

Hi there @marcemarc!

Firstly, a big thank you for raising this issue. Every piece of feedback we receive helps us to make Umbraco better.

We really appreciate your patience while we wait for our team to have a look at this but we wanted to let you know that we see this and share with you the plan for what comes next.

• We'll assess whether this issue relates to something that has already been fixed in a later version of the release that it has been raised for.
• If it's a bug, is it related to a release that we are actively supporting or is it related to a release that's in the end-of-life or security-only phase?
• We'll replicate the issue to ensure that the problem is as described.
• We'll decide whether the behavior is an issue or if the behavior is intended.

We wish we could work with everyone directly and assess your issue immediately but we're in the fortunate position of having lots of contributions to work with and only a few humans who are able to do it. We are making progress though and in the meantime, we will keep you in the loop and let you know when we have any questions.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

[github-actions]

Hi @marcemarc,

We're writing to let you know that we would love some help with this issue. We feel that this issue is ideal to flag for a community member to work on it. Once flagged here, folk looking for issues to work on will know to look at yours. Of course, please feel free work on this yourself ;-). If there are any changes to this status, we'll be sure to let you know.

For more information about issues and states, have a look at this blog post.

Thanks muchly, from your friendly Umbraco GitHub bot :-)

[nielslyngsoe]

Hi @marcemarc thanks for your jokes and perspectives.

I have to highlight first and most importantly the Upload button is missing at this point. That should cover the immediate need from your Editors. As well give the users who are not safe with dragging files an option to upload multiple files.

Secondary to that, I agree that we should hint this ability, especially because we can do it in a way where we do not waste space, by only showing this in empty folders.

It would be the first place in New Backoffice relation that we have a hint styled piece of UI. Traditionally such would be made in a light hand drawn style, to indicate its not in the UI but a hint on top.
Additionally to that I would like it not to be in any box, just floating on top of the empty folder.
Similar to v.13 it should hint the ability to drop files as well as inviting to upload files (Ideally by pointing to the stil missing Upload button, so the user learns about that option, which also is available in folders with Media Items.

I hope that idea makes sense, but I also hope you understand that this is surely not that this is not currently part of our prioritization. — But the upload button is.

So with that I will mark this issue as up-for-grabs, it would be interesting to see some creative approach on how this can be solved in a light maner. Cause the style used here will be our go to style for other hints in the system, and we should get more of that in the future. And more than what you have seen in v.13.

[iOvergaard]

I can add to this discussion that part of the initial drive to try and exclude the hint-styled UI was looking at how other "file browsers" work; looking at software like Google Drive, you will also not find a hint that you can upload files, nor will you find it in your operating system's Explorer, Finder, etc. It is just assumed that you can drag&drop files anywhere that makes sense. This also applies to other Umbraco editors such as the media picker and the rich text editor.

I guess one could argue this is an "if you know, you know"-basis, but as you so eloquently pointed out, @marcemarc, even your editors upgrading from V13 did not think to try and do it.

I am torn on the issue. On the one hand, making more hints for users should normally be a good thing, but on the other hand, I wonder why it works elsewhere but not in Umbraco.

[marcemarc]

@nielslyngsoe @iOvergaard yes, and you can 'right click' inside google drive :-P

but also I do find a UI hint in an 'empty' folder on google drive?

It feels like to me in a picker, it's different to an empty folder - a picker feels very much like a web site interaction, and I think this hints to editors that of course they will be able to drag and drop, but when it's an empty folder in the media section, it suddenly feels much more like a file system... google drive tries to bridge that gap with the friendly UI hint 'that it is just like your file system'

It's also a little about passive vs active

When you are picking a media item, you are active trying to achieve a specific task, it is continuous, and within infinite editing you stay in the same 'interaction' until the task is complete - whereas when you have a blank folder it's more passive, you have completed a task to create the folder, the UI has 'completely' changed to show you the new empty folder - and you are temporarily disorientated and have lost the thread of 'what next'

All that said, if there is an Upload button visible - then that will allow editors to immediately pick up the thread and complete their task - but also provide a big enough hint at a subconscious level that drag and drop is possible, the interconnectedness of all things and the establishment of context will do the job without the need for an animated giraffe tossing file/media shaped rubber rings onto a unicorn's horn to illustrate what can be done here.

Think it's worth re-evaluating after the Upload button is clear and maybe moving this to discussion rather than up for grabs...?

[leekelleher]

Cross linking with #18035 discussion for reference.

[iOvergaard]

You got me, @marcemarc. Let's see what we can do with upload buttons and hints (in empty folders).