input:file lifecycle test

selected file is still alive even input:file deleted.

by Ukjin Yang

HTML

<button id="toggler">Toggle File</button>
<button id="getfile">show selected image and info from input:file</button>
<div id="chumbu"></div>
<img id="img" width="256" hidden>

CSS

[hidden]{display:none;}
#chumbu{margin:1em 0;}

JavaScript

var chumbu = document.querySelector('#chumbu'), toggler = document.querySelector('#toggler'), getfile = document.querySelector('#getfile'), img = document.querySelector('#img');
toggler.addEventListener('click', function(){
	!('activate' in this) && (this.activate = false);
	if(this.activate = !this.activate) {
  	var filer = document.createElement('input');
    filer.type = 'file';
    filer.accept = "image/*"
    chumbu.appendChild(filer);
  } else {
  	chumbu.innerHTML = '';
  }
});
getfile.addEventListener('click', function(){
	var filer = chumbu.querySelector('input[type=file]');
  filer && (this.file = filer.files[0]);
  if('file' in this) {
  	console.log(this.file);
    var reader = new FileReader();
    reader.onload = function(){
    	img.src = reader.result;
      img.hidden = false;
    }
    reader.readAsDataURL(this.file);
  } else img.hidden = true;
});