Willshaw/image-transparency-check.html

## image-transparency-check.html
<DOCTYPE !html>
<html>
	<head>
		<title>Quick image check</title>
		<style>
			* {
				font-family: sans-serif;
			}

			#dropzone,
			#imgReview  {
				width: 100%;
				height: 100%;
				border-radius: 15px;
				position: relative;
			}

			#dropZone {
				background-color: #EEE;
			}
			#imgReview {
				overflow: scroll;
				display: none;
				background: -webkit-gradient(linear,  left top,  right bottom,
			        color-stop(0%, rgba(255, 0, 0, 1)),
			        color-stop(15%, rgba(255, 255, 0, 1)),
			        color-stop(30%, rgba(0, 255, 0, 1)),
			        color-stop(50%, rgba(0, 255, 255, 1)),
			        color-stop(65%, rgba(0, 0, 255, 1)),
			        color-stop(80%, rgba(255, 0, 255, 1)),
			        color-stop(100%, rgba(255, 0, 0, 1))
			    );
			}

			#imgReview img {
				max-width: 90%;
			}

			.singleImg {
				display: block;
				margin: 1em auto;
			}

			#btnReset {
				position: absolute;
				right: 15px;
				top: 15px;
				background-color: #999;
				color: #EEE;
				z-index: 100;
				border-radius: 5px;
				padding: 0.25em;
				cursor: pointer;
			}

			#btnReset:hover { opacity: 0.75 }

			.dropZoneText {
				color: #333;
				font-size: 20px;
				line-height: 1.5em;
				position: absolute;
				top: 50%;
				left: 0;
				margin-top: -15px;
				text-align: center;
				width: 100%;
				text-shadow: 1px 1px 3px #999;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div id="btnReset">Reset</div>
			<div id="dropZone">
				<div class="dropZoneText">
				Drag and drop a file here
				</div>
			</div>
			<div id="imgReview"></div>
		</div>
		<script>

			function showDropzone( shouldItReally ) {

				if( typeof shouldItReally === 'undefined' ) {
					shouldItReally = true;
				}

				dropZone.style.display = shouldItReally ? 'block' : 'none';
				imgReview.style.display = shouldItReally ? 'none' : 'block';
			}

			function reset() {
				showDropzone( true );
				imgReview.innerHTML = '';
			}

			function handleDragOver(e) {
		        e.stopPropagation();
		        e.preventDefault();
		        e.dataTransfer.dropEffect = 'copy';
		    };

			function populateImgReview(e) {
		        e.stopPropagation();
		        e.preventDefault();
		        var files = e.dataTransfer.files,
		        	cnt = files.length,
		        	imgReviewWidth = 0,
		        	rowLimit = 3;

		    	showDropzone( false );

	        	imgReviewWidth = imgReview.scrollWidth;

		        for (var i=0, file; file=files[i]; i++) {
		            if (file.type.match(/image.*/)) {
		                var reader = new FileReader();
		                reader.onload = function(e2) { // finished reading file data.
		                    var img = document.createElement('img');

		                    img.src= e2.target.result;

		                    if( cnt === 1 ) {
		                    	img.classList.add('singleImg');
		                    } else {
		                    	var actualWidth = img.width,
		                    		optimialWidth = imgReviewWidth / Math.min( cnt, rowLimit),
		                    		widthToUse = Math.min( optimialWidth, actualWidth );
		                    	console.log( actualWidth, imgReviewWidth, optimialWidth, widthToUse );
		                    	img.width = widthToUse;
		                    }

		                    imgReview.appendChild(img);
		                }
		                reader.readAsDataURL(file); // start reading the file data
		    		}
		    	}
		    }

		    var dropZone = document.getElementById('dropZone'),
		    	imgReview = document.getElementById('imgReview');
		    	btnReset = document.getElementById('btnReset');

		    btnReset.addEventListener('click', reset);

		    dropZone.addEventListener('dragover', handleDragOver );
		    imgReview.addEventListener('dragover', handleDragOver );

		    // Get file data on drop
		    dropZone.addEventListener('drop', populateImgReview );

		    imgReview.addEventListener('drop', function(e) {
		    	reset();

		    	populateImgReview( e );
		    });

		</script>
	</body>
</html>
	<DOCTYPE !html>
	<html>
	<head>
	<title>Quick image check</title>
	<style>
	* {
	font-family: sans-serif;
	}

	#dropzone,
	#imgReview {
	width: 100%;
	height: 100%;
	border-radius: 15px;
	position: relative;
	}

	#dropZone {
	background-color: #EEE;
	}
	#imgReview {
	overflow: scroll;
	display: none;
	background: -webkit-gradient(linear, left top, right bottom,
	color-stop(0%, rgba(255, 0, 0, 1)),
	color-stop(15%, rgba(255, 255, 0, 1)),
	color-stop(30%, rgba(0, 255, 0, 1)),
	color-stop(50%, rgba(0, 255, 255, 1)),
	color-stop(65%, rgba(0, 0, 255, 1)),
	color-stop(80%, rgba(255, 0, 255, 1)),
	color-stop(100%, rgba(255, 0, 0, 1))
	);
	}

	#imgReview img {
	max-width: 90%;
	}

	.singleImg {
	display: block;
	margin: 1em auto;
	}

	#btnReset {
	position: absolute;
	right: 15px;
	top: 15px;
	background-color: #999;
	color: #EEE;
	z-index: 100;
	border-radius: 5px;
	padding: 0.25em;
	cursor: pointer;
	}

	#btnReset:hover { opacity: 0.75 }

	.dropZoneText {
	color: #333;
	font-size: 20px;
	line-height: 1.5em;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -15px;
	text-align: center;
	width: 100%;
	text-shadow: 1px 1px 3px #999;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div id="btnReset">Reset</div>
	<div id="dropZone">
	<div class="dropZoneText">
	Drag and drop a file here
	</div>
	</div>
	<div id="imgReview"></div>
	</div>
	<script>

	function showDropzone( shouldItReally ) {

	if( typeof shouldItReally === 'undefined' ) {
	shouldItReally = true;
	}

	dropZone.style.display = shouldItReally ? 'block' : 'none';
	imgReview.style.display = shouldItReally ? 'none' : 'block';
	}

	function reset() {
	showDropzone( true );
	imgReview.innerHTML = '';
	}

	function handleDragOver(e) {
	e.stopPropagation();
	e.preventDefault();
	e.dataTransfer.dropEffect = 'copy';
	};

	function populateImgReview(e) {
	e.stopPropagation();
	e.preventDefault();
	var files = e.dataTransfer.files,
	cnt = files.length,
	imgReviewWidth = 0,
	rowLimit = 3;

	showDropzone( false );

	imgReviewWidth = imgReview.scrollWidth;

	for (var i=0, file; file=files[i]; i++) {
	if (file.type.match(/image.*/)) {
	var reader = new FileReader();
	reader.onload = function(e2) { // finished reading file data.
	var img = document.createElement('img');

	img.src= e2.target.result;

	if( cnt === 1 ) {
	img.classList.add('singleImg');
	} else {
	var actualWidth = img.width,
	optimialWidth = imgReviewWidth / Math.min( cnt, rowLimit),
	widthToUse = Math.min( optimialWidth, actualWidth );
	console.log( actualWidth, imgReviewWidth, optimialWidth, widthToUse );
	img.width = widthToUse;
	}

	imgReview.appendChild(img);
	}
	reader.readAsDataURL(file); // start reading the file data
	}
	}
	}

	var dropZone = document.getElementById('dropZone'),
	imgReview = document.getElementById('imgReview');
	btnReset = document.getElementById('btnReset');

	btnReset.addEventListener('click', reset);

	dropZone.addEventListener('dragover', handleDragOver );
	imgReview.addEventListener('dragover', handleDragOver );

	// Get file data on drop
	dropZone.addEventListener('drop', populateImgReview );

	imgReview.addEventListener('drop', function(e) {
	reset();

	populateImgReview( e );
	});

	</script>
	</body>
	</html>