Catch Image Dragged Into A Text Field In Javascript

I want to allow a user to drag an image from a web page into my web app and then store and use the image url elsewhere in the application. So I'm creating an input field as the dra

Solution 1:

No, to my knowledge, there are no events that'll fire as soon as you make the drop.

Here's a possible solution:

var input = document.getElementById("input");
var lastVal = input.value;

setInterval(function() {
  if (input.value !== lastVal) {
    if (input.value) {
      if ( /\.(jpe?g|gif|bmp|png)(\?.*)?$/.test(input.value) ){
        alert('It\'s an image URL!!!');
      } else {
        alert('Not an image URL...');
      }
    }
    lastVal = input.value;
  }
}, 100);

Demo here: http://jsbin.com/izake

Note: It appears that some browsers (IE) don't let you drop items into fields like other browsers. It may be worth creating one from scratch - where everything on the page is draggable...

Solution 2:

You won't get an standard event directly after drag-and-drop (only after clicking outside the textfield), but perhaps you can use some kind of DragListener...

To check if the URL is a valid image, it will be best to check the extension (JPG, PNG, GIF...) and to check if the URL begins with "file:" - if it does, it links to a local image file and you should ignore it.