JSFiddle - React, Tailwind, and code Playground

by SupunKavinda

HTML

<html>
<body style="padding:100px;background-color:#fafafa;font-family: 'Segoe UI', sans-serif;">

<link rel="stylesheet" href="style.css" />

<div id="drop-region">
	<div class="drop-message">
		Drag & Drop images or click to upload
	</div>
	<div id="image-preview"></div>
</div>

<script type="text/javascript" src="script.js"></script>

</body>
</html>

CSS

#drop-region {
	background-color: #fff;
	border-radius:20px;
	box-shadow:0 0 35px rgba(0,0,0,0.05);
	width:400px;
	padding:60px 40px;
	text-align: center;
	cursor:pointer;
	transition:.3s;
}
#drop-region:hover {
	box-shadow:0 0 45px rgba(0,0,0,0.1);
}

#image-preview {
	margin-top:20px;
}
#image-preview .image-view {
    display: inline-block;
	position:relative;
	margin-right: 13px;
	margin-bottom: 13px;
}
#image-preview .image-view img {
    max-width: 100px;
    max-height: 100px;
}
#image-preview .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    z-index: 2;
    background: rgba(255,255,255,0.5);
}

JavaScript

var // where files are dropped + file selector is opened
	dropRegion = document.getElementById("drop-region"),
	// where images are previewed
	imagePreviewRegion = document.getElementById("image-preview");


// open file selector when clicked on the drop region
var fakeInput = document.createElement("input");
fakeInput.type = "file";
fakeInput.accept = "image/*";
fakeInput.multiple = true;
dropRegion.addEventListener('click', function() {
	fakeInput.click();
});

fakeInput.addEventListener("change", function() {
	var files = fakeInput.files;
	handleFiles(files);
});


function preventDefault(e) {
	e.preventDefault();
  	e.stopPropagation();
}

dropRegion.addEventListener('dragenter', preventDefault, false)
dropRegion.addEventListener('dragleave', preventDefault, false)
dropRegion.addEventListener('dragover', preventDefault, false)
dropRegion.addEventListener('drop', preventDefault, false)


function handleDrop(e) {
	var dt = e.dataTransfer,
		files = dt.files;

	handleFiles(files)		
}

dropRegion.addEventListener('drop', handleDrop, false);



function handleFiles(files) {
	for (var i = 0, len = files.length; i < len; i++) {
		if (validateImage(files[i]))
			previewAnduploadImage(files[i]);
	}
}

function validateImage(image) {
	// check the type
	var validTypes = ['image/jpeg', 'image/png', 'image/gif'];
	if (validTypes.indexOf( image.type ) === -1) {
		alert("Invalid File Type");
		return false;
	}

	// check the size
	var maxSizeInBytes = 10e6; // 10MB
	if (image.size > maxSizeInBytes) {
		alert("File too large");
		return false;
	}

	return true;

}

function previewAnduploadImage(image) {

	// container
	var imgView = document.createElement("div");
	imgView.className = "image-view";
	imagePreviewRegion.appendChild(imgView);

	// previewing image
	var img = document.createElement("img");
	imgView.appendChild(img);

	// progress overlay
	var overlay = document.createElement("div");
	overlay.className = "overlay";
	imgView.appendChild(overlay);


	// read the...