перетащите несколько файлов только сначала

Question

У меня есть простое перетаскивание для изображений с предварительным просмотром, см. Ниже.

Желаемое поведение должно состоять в том, чтобы выбрать только одно изображение и предварительно просмотреть его.Это работает нормально, пока изображение просматривается или только одно изображение отбрасывается.

Проблема возникает, когда несколько изображений пытаются сбросить.Я хотел бы взять только первое изображение и отбросить все остальные, но из-за файла только для чтения, я застрял.Так что до сих пор у меня есть это предупреждение в обработчике дропа, но я хочу от него избавиться.Есть ли обходной путь?

$('.drag-drop').wrap("<label class='dropZone'></label>");
$('.drag-drop').after("<img>");
$('.drag-drop').after("<div title='No file chosen'>"+$('.drag-drop').attr('data-text')+"</div>");
$('.drag-drop').prop("hidden",true);
$(".drag-drop").change(function(){
  if(this.files && this.files[0]){
    var e = $(this);
    e.siblings('div').hide();
    var reader = new FileReader();
    reader.onload = function(ev) {e.siblings('img').attr('src', ev.target.result);}
    reader.readAsDataURL(this.files[0]);
  }
});
$('.dropZone').on("dragenter dragover dragstart dragend",function(e){e.preventDefault();});
$('.dropZone').on({
  drop:function(ev){
    ev.preventDefault();
    if(ev.originalEvent.dataTransfer.files.length != 1){
    	alert("Please drop only 1 file!");
    }else{
      $(this).css("border-style","dashed");
      $(this).children('input')[0].files = ev.originalEvent.dataTransfer.files;
    }
  },
  dragenter:function(){
    $(this).css("border-style","solid");
  },
  dragleave:function(){
    $(this).css("border-style","dashed");
  }
});

.dropZone{
  display:table;
  margin:1rem;
  font-size:2rem;
  border-radius:.25rem;
  border:1px dashed;
  background-color:#e8e8e8;
}
.dropZone:active{
  border-style:solid;
}
.dropZone img{
  max-width:21rem;
  max-height:13rem;
}
.dropZone div{
  width:21rem;
  height:13rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" class="drag-drop" data-text="Drop here..." accept="image/jpeg, image/png">

Моя скрипка: http://jsfiddle.net/aq9Laaew/249920/