Multiple file upload viewer

index.html

<div class="container">
	<h1>Multiple File Upload Viewer</h1>
</div>
<div class="container">
<form action="">
	<div>
		<label for="upload">
			<input type="file" id="upload" multiple>
		Upload Files
		</label>
	</div>
	<div class="files">
		<h2>Files Selected</h2>
		<ul></ul>
	</div>
	<input type="submit" value="Submit" name="submit" id="submit" />
</form>	
</div>

multiple-file-upload-viewer.markdown

Multiple file upload viewer

A Pen by Scott Alguire on CodePen.

License.

script.babel

// no react or anything
let state = {};

// state management
function updateState(newState) {
	state = { ...state, ...newState };
	console.log(state);
}

// event handlers
$("input").change(function(e) {
	let files = document.getElementsByTagName("input")[0].files;
	let filesArr = Array.from(files);
	updateState({ files: files, filesArr: filesArr });

	renderFileList();
});

$(".files").on("click", "li > i", function(e) {
	let key = $(this)
		.parent()
		.attr("key");
	let curArr = state.filesArr;
	curArr.splice(key, 1);
	updateState({ filesArr: curArr });
	renderFileList();
});

$("form").on("submit", function(e) {
	e.preventDefault();
	console.log(state);
	renderFileList();
});

// render functions
function renderFileList() {
	let fileMap = state.filesArr.map((file, index) => {
		let suffix = "bytes";
		let size = file.size;
		if (size >= 1024 && size < 1024000) {
			suffix = "KB";
			size = Math.round(size / 1024 * 100) / 100;
		} else if (size >= 1024000) {
			suffix = "MB";
			size = Math.round(size / 1024000 * 100) / 100;
		}

		return `<li key="${index}">${
			file.name
		} <span class="file-size">${size} ${suffix}</span><i class="material-icons md-48">delete</i></li>`;
	});
	$("ul").html(fileMap);
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.scss

* {
	box-sizing: border-box;
}

input[type="file"] {
	position: absolute;
	right: -9999px;
	visibility: hidden;
	opacity: 0;
}
input[type="submit"] {
	position: relative;
	padding: 1rem 3rem;
	background: #0c8fda;
	display: inline-block;
	text-align: center;
	overflow: hidden;
	border-radius: 10px;
	border: 0;
	color:#fff;
	&:hover {
		background: darken(#0c8fda, 5);
		color: #fff;
		cursor: pointer;
		transition: 0.2s all;
	}
}
label {
	position: relative;
	padding: 1rem 3rem;
	background: #eee;
	display: inline-block;
	text-align: center;
	overflow: hidden;
	border-radius: 10px;
	&:hover {
		background: #0c8fda;
		color: #fff;
		cursor: pointer;
		transition: 0.2s all;
	}
}

div {
	&.files {
		background: #eee;
		padding: 1rem;
		margin:1rem 0;
		border-radius:10px;
		ul{
			list-style:none;
			padding:0;
			max-height:150px;
			overflow:auto;
			li{
				padding:0.5rem 0;
				padding-right:2rem;
				position:relative;
				i{
					cursor:pointer;
					position:absolute;
					top:50%;
					right:0;
					transform:translatey(-50%);
				}
			}
		}
	}
	&.container {
		width: 100%;
		padding: 0 2rem;
	}
}

span.file-size {
	color: #999;
	padding-left: 0.5rem;
}