Z Intern Drag and Drop (dnd) Notes

• need to retest previous logic to get the file data. from notes appears it was possible but there was some conflict to use it

purpose: this is a follow up note to webcompat.com issue #1571 because the current solution implementation is not really clean

• ideally: it would have been preferred to use the HTML Drag and Drop API

  • write listener/handler for 2nd image dnd event
  • get 2nd file info from the latest dnd event
  • update the file input field via JS for 2nd file info

• through testing, it was possible to detect:

  • when the 2nd image dnd event occurred
  • also if the file input field is currently filled at the time of the 2nd dnd event

• through testing, it is currently NOT possible to detect:

  • 2nd image file data from the dnd event (see first 2 links in Resources section as the cause); it appears only Chrome is currently supporting the DataTransfer API's items property (which gives access to the dragged files data)
    • (update 072117) these are my notes from the time of testing, which are not totally clear to me (but I'll look again at what this means early next week)
    • "look at showUploadPreview() 1 instead of preventDefault() for drag/drop, try to capture the file uri for the 2nd drag/drop event" "test a (first choice route results)
    • 1 if do 2 prevent defaults, I can get the file uri but this prevents a 2nd drag drop response; 2 if I do any fewer prevent defaults, I cannot get the file uri at all (and the 2nd drag drop updates the browser url to the file url)"
  • at the time of this writing, this concept was only tested on FF

Stubbed out Code

• see https://github.com/webcompat/webcompat.com/pull/1670
• this branch does not include the non working DataTransfer API code to get items/file data but it provides a skeleton for dragover and drop event(s) handling; currently combined to prevent a 2nd drag/drop from filling the entire browser win

Suggestions for Further Exploration

• MikeT has made mention of the FileReader API for dragged file detection; it is conceivable to maybe combine the drag/drop handlers with FileReader API for a better solution to #1571; I did not explore the use of the FileReader API during testing

Resources:

• https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop (note especially Process the Drop section)
• http://caniuse.com/#feat=dragndrop (note "dataTransfer.items only supported by Chrome")
• https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer (appears sections of this api are still experimental for FF)
• https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API (overview)