Image Drag and Drop, Upload -- Only allow one image to be uploaded?

Question

I'm creating an image uploader that looks like this:

This is what I want to happen:

1. The total number of images that the user can upload is one. In other words, if the user tries to upload another image, the previous one gets deleted.
2. When the user drops an image into the gray area, it appears
3. When the user clicks upload image, it appears

I managed to get 2 and 3 working. See the code on codepen here: http://codepen.io/aseelaldallal/pen/QdwYgv/

Here are my problems:

1. Say the user drops an image into the gray box (or clicks upload image). The image appears. Now, say he/she tries to drop another image on top of the first one. What should happen is that the first image gets deleted, and the new image appears. Unfortunately, this does NOT work.

2. Say the user drops an image into the gray box (or clicks upload image). The image appears. Now say the user clicks upload image and selects another image. Nothing happens. The original image is still there.

Here is my code (or just click the codepen link above):

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%;
}

I tried something as simple as adding

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

Any ideas?

Answer 1

You are hiding the dropbox which has the Event Listener on it, so that's why it's not working.