Willshaw · January 14, 2016 10:02
diff --git a/image-transparency-check.html b/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>