Coder Wrap provides free to use snippets

* {
 box-sizing: border-box;
}

.file-main {
 max-width: 500px;
 width: 100%;
 margin: auto;
 padding: 40px;
 min-height: 300px;
 background-color: #e1e1e1;
 display: flex;
 flex-flow: row wrap;
 align-content: center;
 justify-content: center;
 font-family: arial;
}

.file-group {
 width: 100%;
 font-family: arial;
 position: relative;
 font-size: 15px;
}

.file-group .btnupload {
 position: absolute;
 right: 10px;
 top: 10px;
 background-color: #3F7799;
 color: #fff;
 display: flex;
 flex-flow: row wrap;
 justify-content: center;
 pointer-events: none;
 padding: 6px 14px;
}

.file-group .custom-text {
 white-space: nowrap;
 overflow: hidden;
 width: 100%;
 display: inline-block;
 text-overflow: ellipsis;
 padding: 14px 90px 14px 16px;
 border-radius: 4px;
 font-size: 16px;
 border: 1px #3F7799 solid;
 color: #3F7799;
 line-height: normal;
 cursor: pointer;
}

const realFileBtn = document.querySelector(".real-file");
	const customTxt = document.querySelector(".custom-text");
	customTxt.addEventListener("click", function() {
	  realFileBtn.click();
	});

	realFileBtn.addEventListener("change", function() {
  if (realFileBtn.value) {
    customTxt.innerHTML = realFileBtn.value.match(
      /[\/\\]([\w\d\s\.\-\(\)]+)$/
    )[1];
  } else {
    customTxt.innerHTML = "Upload your file(s)";
  }
	});