Reading and Creating Text Files Using the HTML5 File API

by abubelinha

HTML

<button type="button" id="btn-open" class="btn-copy">Open...</button>
<button type="button" id="btn-save" class="btn-copy">Save</button>
<button type="button" id="btn-subtit" class="btn-copy" onclick="subtitular();">
Proc.subt.</button>
</button>
<textarea id="textarea1" rows="10" onchange="alert('cambiou');"></textarea>
<input accept=".txt,.csv,.xml" id="file-browser" type="file" />
<textarea id="subtitles" rows="10"></textarea>
<textarea id="lineas" rows="10"></textarea>
<script type="text/javascript">

</script>

CSS

textarea {
    display: block;
    width: 100%;
    overflow: scroll;
}
#file-browser {
   display: none;
}

JavaScript

Object.size = function(obj) {
    var size = 0, key;
    for (key in obj) {
        if (obj.hasOwnProperty(key)) size++;
    }
    return size;
};
document.getElementById('btn-open').onclick = function() {
  if ('FileReader' in window) {
    document.getElementById('file-browser').click();
  } else {
    alert('Your browser does not support the HTML5 FileReader.');
  }
};
function isNumeric(n) {//https://stackoverflow.com/a/1830844/710788
  return !isNaN(parseFloat(n)) && isFinite(n);
}
function milisecs(textime) {
	var h=Number(textime.substr(0, 2));
	var m=Number(textime.substr(3, 2));
	var s=Number(textime.substr(6, 2));
	var ms=Number(textime.substr(9, 3));
	return(1000*(60*60*h + 60*m + s) + ms);
}
function subtitula(texto) {
    document.getElementById('lineas').value = texto;
    currentime=Date.now();
    return;
}
var subini=0; var subfin=0; 
var startime=Date.now(); var currentime;
var counter=0; var maxcount=23;
var subtitulo="";
var subtitulos=[]; var timers=[];
var subtitulobj={};
subtitulos[0]="";
function evalinha(linha) {
	if(counter>maxcount) return;
	if(isNumeric(linha) && linha>0) {
		counter=Number(linha);
    	//var d=new Date();
      currentime=Date.now();
      var mili=currentime-startime;
      //subtitula(mili);
      timers[counter-1]="["+counter+"] subini:"
      +subini+" - subfin:"+subfin
      +"\n currentime="+currentime+", startime="+startime
      +" (mili="+mili+"). Faltan "+String(subini-mili)
      +" milisecs.";
      if(false) {
        setTimeout(function() {
           subtitula(timers[counter-1]+'\n'+subtitulos[counter-1]);
        },subini-mili); 
        setTimeout(function() {
           subtitula('');
        },subfin-mili); 
      }
      //alert(subini+" - "+subfin+"\n"+subtitulo+"\n\n"+mili);
      //subtitulos[counter]="";
	} else {
  	if(linha.indexOf(" --> ")>0) {
    	if(subini==0) alert(linha);
       subini=milisecs(linha.substr(0, 12));
       subfin=milisecs(linha.substr(17, 12));
      ...