Reading uploaded text file contents in html

Question

I want to show contents of uploaded file in html, I can just upload a text file. My example.html:

<html xmlns="http://www.w3.org/1999/xhtml" >
<p>
Please specify a file, or a set of files:<br>
<input type="file" name="datafile" size="40">
</p>

<textarea id="2" name="y" style="width:400px;height:150px;"></textarea>
</html>

How can I show contents of any uploaded text file in textarea shown below?

try this http://stackoverflow.com/questions/12371970/read-text-file-using-filereader — Alex Nikulin, Jul 31 '15 at 13:03

score 84 · Answer 1 · answered May 24 '17 at 14:55

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>

This is great, thank you. I'm trying to upload a file to the server along with some user inputted data using php. So a user selects a file containing some data, then writes some stuff (ie. time, date, serial no.) then clicks upload and it's one file on the server. I think your answer will help me to implement in an alternative way. — wa7d, Oct 04 '18 at 13:51
> "a file to the server along with some user inputted data" — For this task, it seems more natural to use the multipart form: https://stackoverflow.com/questions/1075513/php-parsing-multipart-form-data — terales, Oct 08 '18 at 03:01

score 29 · Answer 2 · edited Nov 14 '16 at 01:06

29

Here's one way:

HTML

<tr>
    <td>Select a File to Load:</td>
    <td><input type="file" id="fileToLoad"></td>
    <td><button onclick="loadFileAsText()">Load Selected File</button><td>
</tr>

JavaScript

function loadFileAsText(){
  var fileToLoad = document.getElementById("fileToLoad").files[0];

  var fileReader = new FileReader();
  fileReader.onload = function(fileLoadedEvent){
      var textFromFileLoaded = fileLoadedEvent.target.result;
      document.getElementById("inputTextToSave").value = textFromFileLoaded;
  };

  fileReader.readAsText(fileToLoad, "UTF-8");
}

edited Nov 14 '16 at 01:06

EhsanT

2,077
3
27
31

answered Nov 13 '16 at 23:33

app

299
3
3

6

Please note the you do not have any element named _inputTextToSave_ in your html. – EhsanT Nov 13 '16 at 23:49
Helped me in a bacbone.js application – Oldenborg Jul 11 '17 at 21:58
I tried this solution but it fails to compile with the error: ```property result does not exist on type EventTarget``` **Note**: I am using typescript – Samarth Saxena Jan 07 '20 at 07:40

score -1 · Answer 3 · answered Jul 31 '15 at 13:20

Try this.

HTML

<p>
Please specify a file, or a set of files:<br>
<input type="file" id="myFile" multiple size="50" onchange="myFunction()">
</p>

<textarea id="demo" style="width:400px;height:150px;"></textarea>

JS

function myFunction(){
    var x = document.getElementById("myFile");
    var txt = "";
    if ('files' in x) {
        if (x.files.length == 0) {
            txt = "Select one or more files.";
        } else {
            for (var i = 0; i < x.files.length; i++) {
                txt += (i+1) + ". file";
                var file = x.files[i];
                if ('name' in file) {
                    txt += "name: " + file.name + "";
                }
                if ('size' in file) {
                    txt += "size: " + file.size + " bytes ";
                }
            }
        }
    } 
    else {
        if (x.value == "") {
            txt += "Select one or more files.";
        } else {
            txt += "The files property is not supported by your browser!";
            txt  += "The path of the selected file: " + x.value; // If the browser does not support the files property, it will return the path of the selected file instead. 
        }
    }
    document.getElementById("demo").innerHTML = txt;
}

Demo

This works but wrongly. It gives property of file not content of file(if file.txt contains "2 3 4 " It should give "2 3 4"). — Gürkan Çatak, Jul 31 '15 at 16:00
Output does not answer the question, it gives the file type and the file size — Vhortex, Jun 16 '19 at 17:55
Does not answer the question, which sought to read file content. — Magenta Nova, Jun 18 '19 at 16:19
question is for reading file content not file information or filesize.. your code is not giving file content — Vijaysinh Parmar, Jul 30 '20 at 10:34

Reading uploaded text file contents in html

3 Answers3

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

Linked

Related