JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<button id="fake-file">Select file...</button>
<div id="hidden"></div>

CSS

#hidden label input{
  opacity:0;
  visibility:hidden;
  width: 0;
  height: 0;
}
#hidden label{
  opacity:0;
  visibility:hidden;
}
#hidden .show{
  opacity:1;
  visibility:visible;
}
label{
  padding:5px 10px;
  font-family: monospace;
  border-bottom: 1px solid #333;
  display:block;
}
.del{
  font-size: 24px;
  display: inline-block;
  vertical-align: middle;
  color:#f00;
  padding: 5px;
  cursor:pointer;
  
}

JavaScript

var hidden = document.getElementById('hidden');
hidden.addEventListener('click', del);
document.getElementById('fake-file').addEventListener('click', function(){
	var label = addHidden();
  label.click();
});

function addHidden(){
	var label = document.createElement('label');
  var input = document.createElement('input');
  input.name = 'files[]';
  input.type = 'file';
  input.addEventListener('change', function(e){
  	onChange(e, label);
  }); 
  var del = document.createElement('span');
  del.className = 'del'
  del.innerHTML = '&times;';
  var text = document.createElement('span');
  text.className = 'text';
  label.appendChild(input);
  label.appendChild(text);
  label.appendChild(del);
  return label;
}

function onChange(e, label){
  var target = e.target;
  if(target.value){
   	hidden.appendChild(label);
    var text = label.querySelector('.text');
    text.textContent = target.value;
    label.classList.add('show');  
   }
}

function del(e){
	e.preventDefault();
	var target = e.target;
  if(target.classList.contains('del')){	
   	var label = target.parentNode;
    label.parentNode.removeChild(label);
  }
}