helper-drop-image-here.xhtml

Enable keyboard shortcuts

<?xml version="1.0" encoding="utf-8"?>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <title>Image drag and drop: helper file</title>

  <style type="text/css">

    div[ondragenter] {

      width: 105px;

      min-height: 105px;

      text-align: center;

      margin-top: 20px;

      padding: 10px;

      border: solid thin navy;

  </style>

  <script>

    function addImage(event) {

      var c = document.createElement('img');

      c.setAttribute('src', event.dataTransfer.getData('text/uri-list').replace(/\r\n$/, ''));

      document.querySelector('div').appendChild(c);

  </script>

</head>

<body>

  <div ondragenter="event.preventDefault()" ondragover="return false" ondrop="addImage(event)"></div>

</body>

</html>