JSFiddle - React, Tailwind, and code Playground

by davehol

HTML

<input type="file"  id="file">

CSS

#filewrap{
width: 400px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 4px;

}
#click-input{
background-color: #000054;
color: #fff;
padding: 0 3px 0 3px;
border-radius: 4px;
margin-right: 8px;
}
#file-name{
font-weight: normal;
color: #333;
}

JavaScript

for (let i = 0; i < 1_000_000_000; i++);
var ready = function(fn) {
  if (typeof fn !== 'function') return;
  if (document.readyState === 'complete') {
    return fn();
  }
  document.addEventListener('DOMContentLoaded', fn, false);
};

ready(function() {
 const filewrap = document.createElement("div");
 const clickInput = document.createElement("input");
 const fileName = document.createElement("label");
 const file = document.getElementById("file");
 clickInput.setAttribute("type", "button");
 clickInput.setAttribute("id", "click-input");
 clickInput.setAttribute("value", "Choose file");
 clickInput.setAttribute("onclick", "document.getElementById('file').click();");
 fileName.innerHTML = "No file chosen";
 filewrap.setAttribute("id", "filewrap")
 filewrap.appendChild(clickInput);
 filewrap.appendChild(fileName);

 file.onchange = function(event) {
   var path = file.value;
   if (path) {
     fileName.innerHTML = path.split(/(\\|\/)/g).pop()
   } else {
     fileName.innerHTML = 'No file chosen'
   }
 }
 document.body.insertBefore(filewrap, file);
 
 
});