select and set uploaded file to canvas

file_upload_canvas.html

<div class="drag-area">
  <div>Tarik dan lepaskan file gambar disini, atau</div>
  <div class="custom-file" lang="id">
    <input type="file" class="custom-file-input image-file" id="image-file">
    <label class="custom-file-label" for="image-file"></label>
  </div>
  <div class="result-image-block">
    <img src="" alt="" class="result-image" width="500" />
  </div>
</div>
<style>
  .drag-area {
    border: 3px dashed #cccccc;
    text-align: center;
    padding: 10px;
    margin-top: 5px;
    overflow: hidden;
    font-size: 14px;
  }
  .custom-file {
    margin: 1rem 0 .25rem;
  }
  .custom-file-input ~ .custom-file-label::after {
      content: "Pilih File";
  }
  .drag-area.over {
    border-color: #ff0000;
    background-color: #FFE9EA;
  }
  .result-image-block {
    display: none;
    margin: 10px auto 5px;
    text-align: center;
    width: 100%;
  }
  .result-image {
    box-shadow: rgba(0,0,0,0.4) 0 2px 5px;
    width: 100%;
    margin: 0 auto;
  }  
</style>
<script>
		jQuery.event.addProp('dataTransfer');
		var dropTimer;
		var dropTarget = $('.drag-area');
		var fileInput = $('#image-file');

		dropTarget.on("dragover", function(event) {
			clearTimeout(dropTimer);
			if (event.currentTarget == dropTarget[0]) {
				dropTarget.addClass('over');
			}
			return false; // Required for drop to work
		});
		dropTarget.on('dragleave', function(event) {
			if (event.currentTarget == dropTarget[0]) {
				dropTimer = setTimeout(function() {
					dropTarget.removeClass('over');
				}, 200);
			}
		});
		var handleDrop = function(files){
			dropTarget.removeClass('over');
			var file = files[0]; // Multiple files can be dropped. Lets only deal with the "first" one.
			if (file.type.match('image.*')) {
				resizeImage(file, 1000, function(result) {
					$('.result-image').attr('src', result);
					$('.result-image-block').show();
				});
			} else {
				alert("That file wasn't an image.");
			}
		};
		dropTarget.on('drop', function(event) {
			event.preventDefault(); // Or else the browser will open the file
			handleDrop(event.dataTransfer.files);
		});
		fileInput.on('change', function(event) {
			handleDrop(event.target.files);
		});
		var resizeImage = function(file, size, callback) {
			var fileTracker = new FileReader;
			fileTracker.onload = function() {
				var image = new Image();
				image.onload = function(){
					var canvas = document.createElement("canvas");
					/*
					if(image.height > size) {
						image.width *= size / image.height;
						image.height = size;
					}
					*/
					if(image.width > size) {
						image.height *= size / image.width;
						image.width = size;
					}
					var ctx = canvas.getContext("2d");
					ctx.clearRect(0, 0, canvas.width, canvas.height);
					canvas.width = image.width;
					canvas.height = image.height;
					ctx.drawImage(image, 0, 0, image.width, image.height);
					callback(canvas.toDataURL("image/png"));
				};
				image.src = this.result;
			}
			fileTracker.readAsDataURL(file);
			fileTracker.onabort = function() {
				alert("The upload was aborted.");
			}
			fileTracker.onerror = function() {
				alert("An error occured while reading the file.");
			}
		};
</script>