Reading uploaded text file contents in html

by

I’ve came here from google and was surprised to see no working example.

You can read files with FileReader API with good cross-browser support.

const reader = new FileReader()
reader.onload = event => console.log(event.target.result) // desired file content
reader.onerror = error => reject(error)
reader.readAsText(file) // you could also read images and other binaries

See fully working example below.

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>

More Related Contents:

  1. Generating HTML file using javascript and using correct MIME types like “text/html”
  2. How to set a value to a file input in HTML?
  3. How to check file MIME type with javascript before upload?
  4. Remember and Repopulate File Input [duplicate]
  5. How to resolve the C:\fakepath?
  6. HTML5 File API read as text and binary
  7. Client Checking file size using HTML5?
  8. Using HTML5 file uploads with AJAX and jQuery
  9. Does HTML5 allow drag-drop upload of folders or a folder tree?
  10. How to download a file without using element with download attribute or a server?
  11. jQuery : simulating a click on a doesn’t work in Firefox? [duplicate]
  12. How to convert Base64 String to javascript file object like as from file input form?
  13. Get Base64 encode file-data from Input Form
  14. drag drop files into standard html file input
  15. How to select multiple files with ?
  16. get the data of uploaded file in javascript
  17. How to use Javascript to read local text file and read line by line?
  18. Integrating Dropzone.js into existing HTML form with other fields
  19. How to get file name when user select a file via ?
  20. Drag-and-drop file uploading without AJAX, synchronously in the foreground?
  21. What is the best way to upload a folder to a website?
  22. Javascript in html write to file
  23. copying the value of a form’s file input field to another form’s input field
  24. Properly Create and Serve PDF Blob via HTML5 File and URL APIs
  25. javascript: upload image file and draw it into a canvas
  26. How to save and edit a file using JavaScript?
  27. HTML5 File api, reading in an xml/text file and displaying it on the page?
  28. how to get full path from fileupload using Javascript
  29. trigger file upload dialog using javascript/jquery
  30. How to properly use jsPDF library

Leave a Comment