I am trying to attach a Ink Filepicker handler on the whole viewport, so that the user can drop files everywhere in the page. Here is the code i've been trying so far:
window.filepicker.makeDropPane $("html")[0], # or $("body")[0]
mimetype: "image/*"
multiple: true
dragEnter: -> console.log "dragenter fired"
dragLeave: -> console.log "dragleave fired"
onSuccess: (files) -> # do stuff
onError: (type, message) => # do other stuff
onProgress: (percent) -> # do other stuff
Every time I drag the files in the browser, the dragLeave is fired immediately after the dragEnter, making impossible for me to do stuff. Furthermore, if I put a div on top of everything to which I create the Filepicker pane, I obviously cannot interact with the page content anymore, unless I recognize the dragenter event independently by the one triggered by Filepicker so that i can change the z-index on-the-fly.
Let me know if i am not clear. Thanks in advance.