通过拖放将文件附加到输入中的问题

Question

我有这段代码可以将图像拖放到文件类型输入中。

使用此代码，我可以预览标签中的图像。使用该按钮可以很好地工作，但是如果我拖放，它将无法工作。

问题是，当我拖放文件时，如果获得预览但文件未附加在输入中，则无法将图像上传到服务器。

有解决问题的主意吗？

我编辑了我的问题，如果你们中的一个服务，我会回答自己：

this.$fileInput.files = e.dataTransfer.files;
this.$fileInput.dispatchEvent(new Event('change'));

(function() {
  function FileUploader(selector) {
    if (undefined !== selector) {
      this.init(selector);
    }
  }

  FileUploader.prototype.init = function(selector) {
    if (undefined !== this.$el) {
      this.unsuscribe();
    }

    this.$el = document.querySelector(selector);
    this.$fileInput = this.$el.querySelector('input');
    this.$img = this.$el.querySelector('img');

    this.suscribe();
  };

// comienza Drag - drop

  FileUploader.prototype.suscribe = function() {
    this.$fileInput.addEventListener('change', _handleInputChange.bind(this));
    this.$img.addEventListener('load', _handleImageLoaded.bind(this));
    this.$el.addEventListener('dragenter', _handleDragEnter.bind(this));
    this.$el.addEventListener('dragleave', _handleDragLeave.bind(this));
    this.$el.addEventListener('drop', _handleDrop.bind(this));
  };

  FileUploader.prototype.unsuscribe = function() {
    this.$fileInput.removeEventListener(
      'change',
      _handleInputChange.bind(this)
    );
    this.$img.removeEventListener('load', _handleImageLoaded.bind(this));
    this.$el.removeEventListener('dragenter', _handleDragEnter.bind(this));
    this.$el.removeEventListener('dragleave', _handleDragLeave.bind(this));
    this.$el.removeEventListener('drop', _handleDrop.bind(this));
  };

  function _handleDragEnter(e) {
    e.preventDefault();

    if (!this.$el.classList.contains('dragging')) {
      this.$el.classList.add('dragging');
    }
  }

  function _handleDragLeave(e) {
    e.preventDefault();

    if (this.$el.classList.contains('dragging')) {
      this.$el.classList.remove('dragging');
    }
  }

  function _handleDrop(e) {
    e.preventDefault();
    this.$el.classList.remove('dragging');

    this.$img.files = e.dataTransfer.files;
    _handleInputChange.call(this);
  }

  function _handleImageLoaded() {
    if (!this.$img.classList.contains('loaded')) {
      this.$img.classList.add('loaded');
    }
  }

  function _handleInputChange(e) {
    var file = (undefined !== e)
    ? e.target.files[0]
    : this.$img.files[0];

    var pattern = /image-*/;
    var reader = new FileReader();

    if (!file.type.match(pattern)) {
      alert('invalid format');
      return;
    }

    if (this.$el.classList.contains('loaded')) {
      this.$el.classList.remove('loaded');
    }

    reader.onload = _handleReaderLoaded.bind(this);
    reader.readAsDataURL(file);
  }

  function _handleReaderLoaded(e) {
    var reader = e.target;
    this.$img.src = reader.result;
    this.$el.classList.add('loaded');
  }

  window.FileUploader = FileUploader;
})();

fileuploader.css

/* File Uploader Styles  */
 
.uploader input {
    display: none; 
}
 
.uploader {
    align-items: center;
    background-color: rgba(0, 0, 0, 0.02);
    display: flex;
    height: 300px;
    justify-content: center;
    outline: 3px dashed #ccc;
    outline-offset: 5px;
    position: relative;
    width: 300px; 
}
 
.uploader img,
.uploader .icon {
    pointer-events: none; 
}
 
.uploader, 
.uploader .icon {
    transition: all 100ms ease-in; 
}
 
.uploader .icon {
    color: rgba(0, 0, 0, 0.2);
    font-size: 5em;
}
 
.uploader.dragging {
    outline-color: orangered; 
}
 
.uploader.dragging .icon {
    color: orangered; 
}
 
.uploader.loaded .icon {
    color: rgba(255, 255, 255, 0.5); 
}
 
.uploader img {
    left: 50%;
    opacity: 0;
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 50%;
    transition: all 300ms ease-in;
    transform: translate(-50%,-50%);
    z-index: -1; 
}
 
.uploader img.loaded {
    opacity: 1; 
}

<script src="https://www.institutoimago.net/js/FileUploader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group">	
		<label for="inputfile" class="uploader" ondragover="return false">
			<span class="icon fa fa-picture-o"></span>
			<img src="" class="">
			<input type="file" id="inputfile" name="inputfile" accept="image/*">
		</label>    	
	</div>
  
<script type="text/javascript">
      new FileUploader('.uploader');
</script>