JSFiddle - React, Tailwind, and code Playground

by Ukjin Yang

HTML

<input type="file" id="file"><br>
<textarea id="out" cols="80" rows="40" style="width:100%;" readonly></textarea>

CSS

html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden;}

JavaScript

const gijun = 'base64,';
file.addEventListener('change', function(e){
	if(this.value && this.files[0]) {
  	const reader = new FileReader();
    reader.addEventListener('load', function(){
    	let result = String(reader.result);
      const idx = result.indexOf(gijun);
      result = idx < 0 ? result : result.substr(idx + gijun.length);
      var split = [];
    	for(let i=0;i<result.length;i+=80)
      	split.push(result.substring(i,Math.min(i+80,result.length)));
      out.value = split.join('\n') + '\n';
    });
    reader.readAsDataURL(this.files[0]);
  }
});