Read file contents

by dshilkret

HTML

Read on change:
<input id="file" type="file" /><br />

Read on click
<input id="fileRadOnClick" type="file"><button id="readFile">Read!</button><br />

<br>
Output:
<textarea id="out" readonly></textarea>

CSS

textarea {
  width: 100%;
  height: 200px;
}

JavaScript

$("#readFile").click(function(){
	var inFile = $("#fileRadOnClick").get(0);
	console.debug(inFile.files, inFile.files[0]);
  loadFiles(inFile.files);
});
$("#file").change(function(){
  loadFiles(this.files);
});


function loadFiles(files){
	for(var i=0; i < files.length; i++){
  	var file = files[i];
  	readFileAsText(file, function(file, contents, event){
    	log(true);
    	log( "name: " + file.name + "\n"
            +"type: " + file.type + "\n"
            +"size: " + file.size + " bytes\n"
            + "starts with: " + contents.substr(1, contents.indexOf("\n"))
           );  
    });
     console.log(r.readAsText(file));
  }
}


/**
 * Load passed file content as text
 */
function readFileAsText(file, callback){
		var r = new FileReader();
    r.onload = function(e) { 
      var contents = e.target.result;
      callback(file, e.target.result, e);
    }
    r.readAsText(file);
   
}


function log(text) {
  var out = $("#out");
  out.val(out.val() + text);
  if(text === true){out.val('');}
}