HI WELCOME TO KANSIRIS

Reading uploaded text file contents in html

Leave a Comment
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)
  })
}
label {
  cursor: pointer;
}

textarea {
  width: 400px;
  height: 150px;
}
<div>
 <label for="input-file">Specify a file:</label><br>
 <input type="file" id="input-file">
</div>

<textarea id="content-target"></textarea>

0 comments:

Post a Comment

Note: only a member of this blog may post a comment.