Splunk Apps » Lookup Editor

Drag and dropping is not going well.

var dropZone = document.getElementById('lookups_editor')
dropZone.addEventListener('drop', function(evt){console.log("got it");}, false);

It appears that I cannot hook the drop handler.

http://www.html5rocks.com/en/tutorials/file/dndfiles/

It appears ondrop is available:

var div = document.createElement('div');
div.ondrop // exists

This doesn't work either:

var dropzone = document.getElementById('drop-zone'); // exists
dropzone.drop = function(){ console.log("Droppin da filez"); }

Might need to be in contentEditable mode (http://help.dottoro.com/ljbflwps.php)

http://stackoverflow.com/questions/32084053/why-is-ondrop-not-working

Working example: http://plnkr.co/edit/2mW3NR0QBuPI59sDEDRo?p=preview

This works?!:

    var holder = document.getElementById('drop-zone');
    console.dir(holder)

    holder.ondragenter = function (e) { e.preventDefault(); this.className = 'nicenice lvl-over'; return false; };
    holder.ondragleave = function () { this.className = 'nicenice'; return false; };
    holder.ondragover = function (e) { e.preventDefault() }
    holder.ondrop = function (e) {
      e.preventDefault();
      console.log("GOT DROP EVENT");
      alert("dropped here");
      return false;
    };

on drop is working but isn't including the file object.

This works:

    var holder = document.getElementById('drop-zone');
    console.dir(holder)

    holder.ondragenter = function (e) { e.preventDefault(); return false; };
    holder.ondragleave = function () { return false; };
    holder.ondragover = function (e) { e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; }
    holder.ondrop = function (e) {
      e.preventDefault();
      console.log("GOT DROP EVENT");
      alert(e.dataTransfer.files.length);
      return false;
    };

http://stackoverflow.com/questions/27732216/on-drag-change-stylesheets-for-all-dropzones-file-upload

https://www.iconfinder.com/icons/329409/five_gesture_hand_high_icon#size=128
https://www.iconfinder.com/icons/290138/document_extension_file_format_paper_icon#size=20

For some reason wiring up the drag handlers using Backbone and jQuery never works:

            var ondrop = function (e) {
                    e.preventDefault();
                  this.onDropFile(e);
                  return false;
            }.bind(this);

            var ondragover = function (e) {
                e.preventDefault();
                e.dataTransfer.dropEffect = 'copy';
            }.bind(this);

            $("#lookup-table")
            .on("dragover", ondragover)
            .on("drop", ondrop);

I get an error indicating that:

Uncaught TypeError: Cannot set property 'dropEffect' of undefined
Uncaught TypeError: Cannot read property 'files' of undefined