Drag and Drop File upload

File upload code found at https://stackoverflow.com/questions/48312403/jquery-change-event-for-input-type-file-by-dropping-a-file-on-the-label-does

by M Shameer

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <input type="file" id="file-field" name="file-field">
    <label for="file-field">Click to select (works)<br>Drop file (doesn't work)</label>

    <div id="result">
    File on change event: <span></span>
    </div>

CSS

*{font-family: 'Roboto', sans-serif;}
 input[type="file"] {
 	display:block;
      display: none;
      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;
    }

JavaScript

$(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) {
    			
          // No idea if this is the right way to do things
    			$('input[type=file]').prop('files', event.originalEvent.dataTransfer.files);
               $('input[type=file]').trigger('change');
    		});
        
        $('input[type=file]').on('change', function(event) {
        
          $('#result span').text(event.target.files[0].name);
          
        });
        
    });