Drag and drop doesn't work

[ross-spencer]

Mixed problems with this using pyscript. Last attempt saw the drag action working, but the default behavior of the action continued to open the file in another browser window. It shouldn't. Further, the listener didn't seem to pick up on the action to trigger it.

async def dnd_file_select(event):
    """Handle file select and follow-on actions from HTML/Pyscript."""
    clear_data()
    event.stopPropagation()
    event.preventDefault()
    DRAG_AND_DROP = "Drag and drop is not yet supported, please use the file-picker"
    document.getElementById("content").contentDocument.body.innerText = DRAG_AND_DROP
    return False


def handle_drop_over(event):
    """Manage the drop-over event."""
    event.stopPropagation()
    event.preventDefault()
    event.dataTransfer.dropEffect = "copy"
    console.log("Registered drop-over")


def setup_button():
    # Create a Python proxy for the callback function
    file_select_proxy = create_proxy(file_select)
    dnd_file_select_proxy = create_proxy(dnd_file_select)
    handle_drop_over_proxy = create_proxy(handle_drop_over)

    # Set the listener to the callback
    document.getElementById("file_select").addEventListener(
        "click", file_select_proxy, False
    )

    # Setup the drag-and-drop listeners.
    #
    # Pyscript may not support this yet...
    #
    dz = document.getElementById("drop_zone")
    dz.addEventListener("dragover", handle_drop_over_proxy, False)
    dz.addEventListener("drop", dnd_file_select_proxy, False)

    console.log("File handler registered")

          <div class="drag" id="drop_zone">
            <label class="custom-file-upload">
              <input type="file" id="file_select" name="files[]" single />
              Choose file
            </label>
            or drop files here
          </div>

Drag-and-drop code is based on HTML5 rocks: https://www.html5rocks.com/en/tutorials/file/dndfiles//