Loading...
 

Set the correct cursor and show a highlight/shadow when a drag & drop source is correctly positioned over the drop target (UX affordance for file uploads etc.)

Status
Open
Priority
5 Nice to have
Task
Set the correct cursor and show a highlight/shadow when a drag & drop source is correctly positioned over the drop target (UX affordance for file uploads etc.)
Add a timesheet
Add a timesheet for this task
Description

When uploading files to attach to a ticket (or elsewhere in the tiki UI), while the UI says you can drag-and-drop there, there is no user-visible visual feedback during drag to indicate that the browser and webpage "understand" the file and that the mouse is over a valid drop location.

It's a matter of detecting that a drag operation is underway over the interactive dropzone area, and adding some nice obvious colored border (or reshading/replacing the background color) and setting the mouse cursor to:

  • the "copy" (the "cursor with '+' sign" variant when over the correct drop zone
  • the "no-drop" variant when outside the correct drop zone


See also the extended table of available cursors in https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

Without these visual indications, it is stressful for users like me who are used to dropping files into the "wrong" areas of web UIs and then the browser goes, "OH CERTAINLY YOU MEANT TO BROWSE THIS FILE AS IF IT WAS A WEBPAGE, RIGHT??" and navigates away from the page (instead of successfully uploading the thing) or crashes everything, and in both cases you lose data. I wish I was kidding/exaggerating, but this happened to me too many times in the past.

Prior art examples of web apps that do this highlight trick: WordPress's media library, YouTube's upload page, Google Drive, NextCloud Files, etc.

Ideally, while fixing this for the file upload form, you should also look at any place in Tiki (using "git grep" maybe) that uses Drag and Drop to ensure at least the correct mouse cursors are used depending on the situation.

Emails
Assigned to
developer
Assigned by
adrien.maloba
Also visible to
1- Visible to Anonymous (Public content)
Related
Created
Sunday 14 of August, 2022 17:58:26 EDT
by Jeff Fortin T.
LastModif
Wednesday 05 of October, 2022 00:58:47 EDT