File chooser

File chooser test

by roge roge

HTML

<form action="">
  <input class="FileSelector" id="fileSelector" type="file" name="myfile" onchange='uploadData()'/>
	<Label for="fileSelector"> Choisi un fichier </Label>
  <br>
  <br>
	Result: <br>
	<Textarea id="textContent" rows="8" cols="50"></Textarea>
</form>

CSS

.FileSelector {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.FileSelector + label {
	color: #da6;
	background-color: #222;
	font-size: 1em;
	font-weight: 700;
	border-radius: 4px;
	padding: 6px 10px;
	cursor: pointer;
	margin: 6px 10px;
	display: inline-block;
}

.FileSelector:focus + label,
.FileSelector + label:hover {
	color: multiply(#da6, #333);
	background-color: #222;
}

JavaScript

function uploadData() {
	console.log("----------");
	let fileSelector = document.getElementById('fileSelector'); 
	let result = document.getElementById('textContent'); 
	let file = fileSelector.files[0];
	let data = {}
	result.value += 'Restauration des données : ' + fileSelector.value + ':\n';
	var reader = new FileReader();

	reader.onload = function(e) {
		result.value += reader.result;
		result.value += 'Restauration des données : OK';
	}
	reader.readAsText(file);	
}