title: Drag and drop a file on label
body: <p>I need your help, again</p>
  
  <p>I can drag and drop a file or click on a basic input file on HTML5 and it'll work.
  What I want is to be able to make that with a label, I can click on the label to add a file with a label for but I can't drag and drop a file on the label. I've tried to make it possible with that JavaScript over here but it didn't work, I've read some tutorials and I'm not sure of the code below.</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).on('dragenter', '#image-event-label', function() {
          $(this).css('border', '1px solid #B8A1F5');
          return false;
      });
       
      $(document).on('dragover', '#image-event-label', function(e){
          e.preventDefault();
          e.stopPropagation();
          $(this).css('border', '1px solid #B8A1F5');
          return false;
      });
       
      $(document).on('dragleave', '#image-event-label', function(e) {
          e.preventDefault();
          e.stopPropagation();
          $(this).css('border', '1px solid #422B7E');
          return false;
      });
  
      $(document).on('drop', '#image-event-label', function(e) {
          if(e.originalEvent.dataTransfer){
             if(e.originalEvent.dataTransfer.files.length) {
                 e.preventDefault();
                 e.stopPropagation();
                 $(this).css('border', '1px solid #0F0');
                 upload(e.originalEvent.dataTransfer.files);
             }  
          }
          else {
             $(this).css('border', '1px solid #422B7E');
          }
          return false;
      });
  
      function upload(files) {
          var f = files[0] ;
          var reader = new FileReader();
          reader.onload = function (event) {
              $('#image-event').val(event.target.result);
          }
          reader.readAsDataURL(f);      
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;label for="image-event" id="image-event-label"&gt;Import an image&lt;/label&gt;
      &lt;input type="file" name="image-event" style="display:none" id="image-event"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks everybody in advance !</p>