이미지 드래그 앤 드롭, 업로드-하나의 이미지 만 업로드 할 수 있습니까?

다음과 같은 이미지 업 로더를 만들고 있습니다.

이것이 내가 원하는 것입니다.

1. 사용자가 업로드 할 수있는 총 이미지 수는 1 개입니다. 즉, 사용자가 다른 이미지를 업로드하려고하면 이전 이미지가 삭제됩니다.
2. 사용자가 회색 영역에 이미지를 떨어 뜨리면 나타납니다.
3. 사용자가 이미지 업로드를 클릭하면

나는 2와 3을 일할 수 있었다. 여기에서 codepen의 코드를 참조하십시오 : http://codepen.io/aseelaldallal/pen/QdwYgv/

내 문제는 다음과 같습니다.

1. 사용자가 회색 상자에 이미지를 놓거나 이미지 업로드를 클릭한다고 가정 해 보겠습니다. 이미지가 나타납니다. 이제 첫 번째 이미지 위에 다른 이미지를 놓으려고한다고 가정 해 보겠습니다. 해야 할 일은 첫 번째 이미지가 삭제되고 새 이미지가 나타납니다. 불행히도 이것은 작동하지 않습니다.

2. 사용자가 회색 상자에 이미지를 놓거나 이미지 업로드를 클릭한다고 가정 해 보겠습니다. 이미지가 나타납니다. 이제 사용자가 이미지 업로드를 클릭하고 다른 이미지를 선택한다고 가정합니다. 아무 반응이 없습니다. 원본 이미지는 여전히 있습니다.

내 코드는 다음과 같습니다 (또는 위의 코드 펜 링크를 클릭하십시오).

HTML :

<div id="imageBorder" class="container">

  <div id="imageContainer">

    <div id="dropbox">
      <i class="fa fa-picture-o" aria-hidden="true"></i>
      <p> Drop image here or click to upload</p>
    </div>

    <div id="preview" class="hidden">
    </div>

    <button id="fileSelect" class="btn btn-primary btn-block">Upload Image</button>
  </div>
</div>

JS

  $(document).ready(function() {

      var dropbox = document.getElementById("dropbox"),
          fileElem = document.getElementById("fileElem"),
          fileSelect = document.getElementById("fileSelect");

      fileSelect.addEventListener("click", function(e) {
          if (fileElem) {
              fileElem.click();
          }
      }, false);

      dropbox.addEventListener("dragenter", dragenter, false);
      dropbox.addEventListener("dragover", dragover, false);
      dropbox.addEventListener("drop", drop, false);
  });

function dragenter(e) {
    e.stopPropagation();
    e.preventDefault();
}

function dragover(e) {
    e.stopPropagation();
    e.preventDefault();
}

function drop(e) {
    e.stopPropagation();
    e.preventDefault();
    var dt = e.dataTransfer;
    var files = dt.files;
    handleFiles(files);
}

function handleFiles(files) {
    var file = files[0];
    var imageType = /^image\//;
    if (!imageType.test(file.type)) {
        alert("NOT AN IMAGE");
        return;
    }
    var img = document.createElement("img");
    img.classList.add("obj");
    img.file = file;
    img.height = $('#dropbox').height();
    img.width = $('#dropbox').width();
    $(dropbox).addClass('hidden');
    $(preview).removeClass('hidden');
    preview.appendChild(img);
    var reader = new FileReader();
    reader.onload = (function(aImg) {
        return function(e) {
            aImg.src = e.target.result;
        };
    })(img);
    reader.readAsDataURL(file)
}

CSS

#imageBorder {
  padding: 1rem;
  border-radius: 5px;
  box-sizing: border-box;
  height: 300px;
  width: 550px;
  border: 1px solid #ccc;
}

#imageContainer {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#dropbox {
  border-radius: 5px;
  text-align: center;
  color: gray;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
  background-color: #e7e7e7;
  height: 100%;
  margin-bottom: 2%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#dropbox i {
  font-size: 6.5rem;
  margin-bottom: 1rem;
}

#dropbox p {
  font-size: 2rem;
  margin-top: 1rem;
}

#preview {
  text-align: center;
  height: 100%;
  margin-bottom: 2%;
}

나는 추가하는 것처럼 간단한 것을 시도했다

$(preview).empty() before preview.appendChild(img)... Didn't work .

어떤 아이디어?