mfyz/resize_preview.html

## resize_preview.html
<!DOCTYPE html>
<html>
<head>
	<title>Angular HTML5 Preview, Crop And Upload</title>
	<style>
		body {
			padding: 50px;
			font: 16px Helvetica;
		}

		.dragArea {
			background-color: #efefef;
			border: 3px dashed #cccccc;
			border-radius: 10px;
			text-align: center;
			padding: 50px;
		}

		.dragArea.over {
			border-color: #ff0000;
			background-color: #FFE9EA;
		}

		.resultImageWrapper {
			display: none;
			margin-top: 50px;
			text-align: center;
		}

		#resultImage {
			box-shadow: rgba(0,0,0,0.4) 0 2px 5px;
		}
	</style>
</head>
<body>

<div class="dragArea">
	<h3>Drag & Drop File Here</h3>
	<h4>Or Select File:</h4>
	<div>
		<input type="file" id="imageFile"/>
	</div>
</div>

<div class="resultImageWrapper">
	<img src="" alt="" id="resultImage" width="500" />
</div>

<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
	// Required for drag and drop file access
	jQuery.event.props.push('dataTransfer');

	$(function(){
		var dropTimer;
		var dropTarget = $('.dragArea');
		var fileInput = $('#imageFile');

		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);
			}
		});

		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) {
					$('#resultImage').attr('src', result);
					$('.resultImageWrapper').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);
		});

		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>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Angular HTML5 Preview, Crop And Upload</title>
	<style>
	body {
	padding: 50px;
	font: 16px Helvetica;
	}

	.dragArea {
	background-color: #efefef;
	border: 3px dashed #cccccc;
	border-radius: 10px;
	text-align: center;
	padding: 50px;
	}

	.dragArea.over {
	border-color: #ff0000;
	background-color: #FFE9EA;
	}

	.resultImageWrapper {
	display: none;
	margin-top: 50px;
	text-align: center;
	}

	#resultImage {
	box-shadow: rgba(0,0,0,0.4) 0 2px 5px;
	}
	</style>
	</head>
	<body>

	<div class="dragArea">
	<h3>Drag & Drop File Here</h3>
	<h4>Or Select File:</h4>
	<div>
	<input type="file" id="imageFile"/>
	</div>
	</div>

	<div class="resultImageWrapper">
	<img src="" alt="" id="resultImage" width="500" />
	</div>

	<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
	<script>
	// Required for drag and drop file access
	jQuery.event.props.push('dataTransfer');

	$(function(){
	var dropTimer;
	var dropTarget = $('.dragArea');
	var fileInput = $('#imageFile');

	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);
	}
	});

	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) {
	$('#resultImage').attr('src', result);
	$('.resultImageWrapper').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);
	});

	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>

	</body>
	</html>