JavaScript Module pattern and Drag and Drop API

Question

I have a sample module in js that is suppose to manage Drag and Drop file upload. The code seems to work for 'dragenter' event function but when I drop the file, and 'drop' event should call the dropped function, the code always forwards to the file path.

Here is the code sample

var testModule = (function testBuilder(){
    function call(evt) {
        evt.preventDefault();
        console.log('works');
    }

    function dropped(evt) {
      evt.preventDefault();
      console.log('file dropped');
    }

    var element = document.getElementById('testBlock');

    function init() {
      element.addEventListener('dragenter', call, false); 
      element.addEventListener('drop', dropped, false);
    }

    publicAPI = {
        init: init
    };

    return publicAPI;
})();

window.onload = function() {
    testModule.init();
};

and a jsbin here https://jsbin.com/redixucate/edit?js,console,output

If anyone can figure out why it keeps redirecting the file path, I would rly appreciate it.

Community · Accepted Answer · 2017-05-23 12:07:34Z

1

Add 'dragover' event with preventDefault and it should work.

Inside your init():

element.addEventListener('dragover', over, false);

and over function:

function over(e) { 
   e = e || window.event; 
   if(e.preventDefault) {
     e.preventDefault();
   } 
}

Also add the same prevention to your other two functions ..

See https://jsbin.com/xemovariwu/1/edit?js,console,output

Also see this question/answer.

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Mar 1, 2016 at 11:02

trainoasis

6,79912 gold badges55 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Teddy Over a year ago

That did the trick. Seems I need to cancel dragover before i can cancel drop as well. Need to stick my nose more in the documentation see if they cover this.

Collectives™ on Stack Overflow

JavaScript Module pattern and Drag and Drop API

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related