dnd.html

<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1" name="viewport"/>

<script>
  UPLOADCARE_PUBLIC_KEY = "demopublickey";
  UPLOADCARE_TABS = "default huddle";
  UPLOADCARE_DEBUG_UPLOADS = true;
</script>
<script src="./uploadcare.full.js"></script>
<script>
  $ = uploadcare.jQuery;
  jQuery = uploadcare.jQuery;
</script>

<style>
  #target {
    border: 10px dashed #ddd;
    border-radius: 50px;
    width: 500px;
    height: 300px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
  #target.uploadcare--dragging {
    border-style: solid;
  }
  body.uploadcare--dragging {
    background-color: #f0f0ff;
  }
</style>

<div id="target">
  Drop file there or
  <a class="target_open" href="#">select from another source</a>.<br /><br />
  <input class="target_input" type="text" size="60" />
</div>

<iframe width="200" height="300" srcdoc="<h1>Target</h1>"> </iframe>
<img
  width="200"
  src="https://ucarecdn.com/90964191-dfa2-4a22-8118-8a9e460fff9b/-/format/jpeg/-/resize/600x/-/quality/lighter/"
  alt=""
/>

<script>
  $(function() {
    $("#target").each(function() {
      var $target = $(this);
      var $input = $target.find(".target_input");

      // open dialog and update input on success
      function openDialog(file) {
        uploadcare.openDialog(file).done(function(file) {
          // first clear previous file if upload fails or user cancel upload.
          $input.val("");

          if (file) {
            file.done(function(fileInfo) {
              $input.val(fileInfo.cdnUrl);
            });
          }
        });
      }

      // listen drag & drop on target
      uploadcare.dragdrop.uploadDrop($target, openDialog);

      // open empty dialog or dialog with uploaded file
      $target.on("click", "a", function(e) {
        e.preventDefault();

        var file = null;
        if ($input.val()) {
          file = uploadcare.fileFrom("uploaded", $input.val());
        }
        openDialog(file);
      });
    });
  });
</script>