How do I detect, with JavaScript, if an image was pasted or dropped into a contenteditable area?

user_10300528 0
Viewed 724

I have a script that prevents the user from pasting, or dropping dragged images into a contenteditable area. When the user tries to do one of those two things, I want an alert to tell him he cannot do that. I tried adding alert("custom message") right before the last break. But it gets triggered in both cases (pasting and dropping). How can I have two different alerts: one for when the user pastes an image ("you cannot paste images here"), and another for when the user drops a dragged image ("you cannot drop images here", within my code?

https://jsfiddle.net/36cfdpoh/

window.onload = function() {
    document.getElementById("editDiv").oninput = function() {
        var thisElement = this;
        var currentElementChildren, currentElementChildrenLength;
        var elements = this.children;
        var elementsLength = elements.length;
        if (elementsLength > 0) {
            for (i = 0; i < elementsLength; i++) {
                if (elements[i].tagName == "IMG") {
                    thisElement.children[i].remove();
                    break;
                } else {
                    currentElementChildren = elements[i].children;
                    currentElementChildrenLength = currentElementChildren.length;
                    if (currentElementChildrenLength > 0) {
                        for (ii = 0; ii < currentElementChildrenLength; ii++) {
                            if (currentElementChildren[ii].tagName == "IMG") {
                                thisElement.children[i].children[ii].remove();
                                alert("you cannot drop images here");
                                break;
                            }
                        }
                    }
                }
            }
        }
    }
}
#editDiv {
    width: 250px;
    height: 50px;
    border: solid 1px #000;
    margin-bottom: 20px;
  }

img {
    width: 250px;
}
<div id="editDiv" contenteditable="true">
    <p>Try to drop or paste that image here.</p>
</div>
    
<img src="https://i7.pngguru.com/preview/134/138/533/star-golden-stars.jpg">

alert clipboard image javascript
2 Answers

You can separately attach paste & drop event to dom and then check which one is firing

user_21813970

There are two solutions to this. Using the input event or using drop and paste events:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <title>Image phobia</title>
</head>

<body>
  <h1>Image phobia</h1>

  <div id="editDiv" contenteditable="true">
    <p>Try to drop or paste that image here.</p>
  </div>

  <img height="100" width="100" src="https://i7.pngguru.com/preview/134/138/533/star-golden-stars.jpg">
  <img height="100" width="100" src="https://i7.pngguru.com/preview/134/138/533/star-golden-stars.jpg">

  <script src="main.js" />
</body>

</html>

input event solution:

main.js

"use strict";
(function() {
  window.addEventListener("load", () => {
    const editDiv = document.getElementById("editDiv");

    // return a message depending on input type
    function alertMessage(type) {
      switch (type) {
        case "insertFromPaste":
          return "You can't paste images here";
        case "insertFromDrop":
          return "You can't drop images here";
      }
    }

    // recursive function to delete image from an element's children
    function removeImages(children) {
      let hadImage = false;
      for (let i = children.length - 1; i >= 0; i--) {
        const child = children[i];
        if (child.tagName === "IMG") {
          child.remove();
          hadImage = true;
          continue;
        }
        if (child.children.length) {
          hadImage = removeImages(child.children);
          if (hadImage) {
            break;
          }
        }
      }
      return hadImage;
    }

    function preventImageInput(e) {
      const inputType = e.inputType;
      if (inputType === "insertFromDrop" || inputType === "insertFromPaste") {
        if (e.target.children.length) {
          const hadImage = removeImages(e.target.children);
          if (hadImage) {
            alert(alertMessage(inputType));
          }
        }
      }
    }

    editDiv.addEventListener("input", preventImageInput);
  });
})();

drop and paste events solution:

main.js

"use strict";
(function() {
  window.addEventListener("load", () => {
    const editDiv = document.getElementById("editDiv");

    // return message depending on event type
    function alertMessage(type) {
      switch (type) {
        case "paste":
          return "You can't paste images here";
        case "drop":
          return "You can't drop images here";
      }
    }

    function preventImageInput(e) {
      // you must use setTimeout because when both the paste or drop events are fired
      // the content isn't changed yet and you won't have access to the new content
      setTimeout(() => {
        const images = e.target.querySelectorAll("img");
        if (images.length) {
          for (let i = images.length - 1; i >= 0; i--) {
            const image = images[i];
            image.remove();
          }
          alert(alertMessage(e.type));
        }
      });
    }

    editDiv.addEventListener("paste", preventImageInput);
    editDiv.addEventListener("drop", preventImageInput);
  });
})();
user_89338870
Related