Custom input

by Lazaro Contreras

HTML

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<img></img>
<input id="add" type="file"></input>
<label for="add" class="material-icons add">add</label>

CSS

*{
  margin:0;
  padding:0;
}
input[type="file"]{
  display:none;
}
.material-icons.add{
  font-size: 200px;
  color: rgb(123, 191, 209);
}

JavaScript

var add = document.querySelector('#add');
var img = document.querySelector('img');
add.onchange = function(){
	var reader = new FileReader();
  var file = add.files[0];
  if(file){
  	reader.readAsDataURL(file);
  }
  reader.onload = function(){
  	img.setAttribute('src', reader.result);
    document.querySelector('.add').remove();
  }
}