Angular directive preventing default action but Chrome still loading image on drag

Question

Angular directive preventing default action but Chrome still loading image on drag

Has anyone encountered an issue with an angular directive that is not successfully preventing Chrome's default action?

Below is the code for the directive in question:

app.directive('fileDrag', function () {
  return {
    restrict: 'A',
    link: function (scope, elem, attrs) {
      elem.bind('drop', function(e){
        e.preventDefault();
        console.log(e);
        return false;
      });
    }
  };
});

Here is the corresponding html snippet:

<div style="width: 500px; height:500px; background-color: red;" file-drag></div>

I am facing difficulties getting Chrome to refrain from opening the image in a new tab when dragging it onto the specified element. Any suggestions on how to resolve this issue?

javascript angularjs google-chrome

Answer 1

Answer №1

It is important to always remember to preventDefault when handling the dragover event. To ensure proper functionality, update your code as shown below:

app.directive('fileDrag', function () {
  return {
    restrict: 'A',
    link: function (scope, elem, attrs) {
      elem.bind('drop', function(e){
        e.preventDefault();
        console.log(e);
        return false;
      });
      elem.bind('dragover', function(e){
        e.preventDefault();
      });
    }
  };
});

Answer 2

It is important to always remember to preventDefault when handling the dragover event. To ensure proper functionality, update your code as shown below:

app.directive('fileDrag', function () {
  return {
    restrict: 'A',
    link: function (scope, elem, attrs) {
      elem.bind('drop', function(e){
        e.preventDefault();
        console.log(e);
        return false;
      });
      elem.bind('dragover', function(e){
        e.preventDefault();
      });
    }
  };
});

Angular directive preventing default action but Chrome still loading image on drag

Answer №1

Similar questions

NextJs manages the logic for processing requests both before and after they are handled

"What might be causing the error 'cannot access property 'top' of undefined' while trying to read

Updating meta tags dynamically in Angular Universal with content changes

I have successfully established a new channel, but I am having difficulty retrieving the unique identifier for it

Obtain the origin of the image using dots in Javascript

socket.io / settings when establishing a connection

Interceptors in axios do not trigger when making requests through a PHP proxy

The nearby diversion inexplicably triggers a phantom GET request

JavaScript generated form fails to submit

Unwrapping the potential of $http promise in AngularJS

The error encountered in the Node crud app states that the function console.log is not recognized as a

Comparing Mongoose and MongoDB in Node.js: Weighing the Benefits of Each

Utilize Javascript to interact with specific Objects

Incorporating fresh JSON information into an established database

What is the best way to determine if a variable exists within an array in Angular and JavaScript?

What is the Best Way to Send JavaScript Variables to MYSQL Database with PHP?

Learn the secrets of displaying a pop-up alert message seamlessly without interrupting the page's rendering process. Additionally, discover how to effortlessly refresh a chart every

Trigger a JavaScript function when a key is pressed down

I have received a JSON multi-line string after entering information in a textarea

Converting a nested JavaScript array into a PHP array