javascript - ドラッグ＆ドロップで入力にファイルを添付する際の問題

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>