Загрузка изображений с превью?

function handleFileSelect(evt) {
    var file = evt.target.files; // FileList object
    var f = file[0];
    // Only process image files.
    if (!f.type.match('image.*')) {
        alert("Image only please....");
    }
    var reader = new FileReader();
    const output = document.getElementById('output');
    const inputRemove = document.querySelector('.photo-checkout__input-file-remove');
    var span = document.createElement('span');
    // Closure to capture the file information.
    reader.onload = (function (theFile) {
        return function (e) {
            // Render thumbnail.
            span.innerHTML = ['<img class="thumb" title="', escape(theFile.name), '" src="', e.target.result, '" />'].join('');
            output.insertBefore(span, null);
        };
    })(f);
    inputRemove.addEventListener("click", function (e) {
        span.remove();
    });

    reader.readAsDataURL(f);
}
document.getElementById('file').addEventListener('change', handleFileSelect, false);

.photo-checkout__block {
  position: relative;
  width: 164px;
  height: 120px;
  cursor: pointer;
  border-radius: 5px;
}
.photo-checkout__input-file {
  cursor: pointer;
  border-radius: 5px;
}

.photo-checkout__input-file span {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.photo-checkout__input-file span img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 5px;
}
.photo-checkout__input-file span:hover .photo-checkout__input-file-remove {
  opacity: 1;
  pointer-events: auto;
}
.photo-checkout__input-file input {
  cursor: pointer;
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  border-radius: 5px;
}
.photo-checkout__input-file label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  width: 165px;
  height: 120px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  font-size: 14px;
  background: #ffffff;
  transition: all 0.3s ease 0s;
  color: #000000;
}
.photo-checkout__input-file label::before {
  content: "+";
  font-size: 18px;
  width: 15px;
  height: 15px;
  margin: 0px 0px 10px 0px;
  color: #000000;
}
.photo-checkout__input-file-remove {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  border-radius: 5px;
  background: linear-gradient(
    0deg,
    rgba(54, 108, 217, 0.8),
    rgba(54, 108, 217, 0.8)
  );
  font-weight: 500;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #ffffff;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease 0s;
  pointer-events: none;
}

<div class="photo-checkout__block">
  <div class="photo-checkout__input-file">
    <input type="file" id="file" name="file" class="file">
    <label>Фотография<br> товара</label>
    <span id="output">
      <div class="photo-checkout__input-file-remove">Удалить</div>
    </span>
  </div </div>