title: jQuery change event for <input type="file"> by dropping a file on the label doesn't work
body: <p>I'm working on a drag &amp; drop file uploader that can be triggered by clicking the label, or dropping a file on the label.</p>
  
  <p>The input field has a jQuery <code>on change</code> event that triggers when a file is selected. But it only works when a file is selected through the explorer menu, but not on the drag and drop event. Why?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() { 
    $('label').on('drag dragstart dragend dragover dragenter dragleave drop', function(event) {
      event.preventDefault();
      event.stopPropagation();
    })
    .on('dragover dragenter', function() {
      $(this).addClass('is-dragover');
    })
    .on('dragleave dragend drop', function() {
      $(this).removeClass('is-dragover');
    })
    .on('drop', function(event) {   
      // Set file on drop
      $('input[type=file]').prop('files', event.originalEvent.dataTransfer.files);      
    });
  
    // Check if change event works
      $('input[type=file]').on('change', function(event) {    
      $('#result span').text(event.target.files[0].name);      
    });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input {
    display: block;
    margin-bottom: 10px;
  }
  
  label {
    padding: 20px;
    
    display: inline-block;
    
    border: 2px dashed grey;
  }
  
  label:hover {
   background: lightgray;
   cursor: pointer;
  }
  
  label.is-dragover {
    background: grey;
  }
  
  #result {
    margin-top: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;input type="file" id="file-field" name="file-field"&gt;
  &lt;label for="file-field"&gt;Click to select (works)&lt;br&gt;Drop file (doesn't work)&lt;/label&gt;
  
  &lt;div id="result"&gt;
  File on change event: &lt;span&gt;&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>