Open onvno opened 5 years ago
Reading uploaded text file contents in html
html
<div> <label for="input-file">Specify a file:</label><br> <input type="file" id="input-file"> </div> <textarea id="content-target"></textarea>
css
label { cursor: pointer; } textarea { width: 400px; height: 150px; }
js
document.getElementById('input-file') .addEventListener('change', getFile) function getFile(event) { const input = event.target if ('files' in input && input.files.length > 0) { placeFileContent( document.getElementById('content-target'), input.files[0]) } } function placeFileContent(target, file) { readFileContent(file).then(content => { target.value = content }).catch(error => console.log(error)) } function readFileContent(file) { const reader = new FileReader() return new Promise((resolve, reject) => { reader.onload = event => resolve(event.target.result) reader.onerror = error => reject(error) reader.readAsText(file) }) }
Reading uploaded text file contents in html
html
css
js