faux file upload button

uploading with a custom upload button

by Christopher O

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<p>Hidden button (css only; meh):</p>
<div class="file_button_container">
  <input type="file" id="theFile" />
  <div class="iconBtnOut iconBtnOutR">
    <i class="fas fa-paperclip iconBtnIn"></i>
  </div>
</div>

<p id="title">Js Click (JS; good):</p>
<div class="iconBtnOut iconBtnOutR" id="paperclip">
  <i class="fas fa-paperclip iconBtnIn"></i>
</div>
<br>
<div id="display"></div>

CSS

.file_button_container {
  position: relative;
  height: 30px;
  width: 30px;
  /* border: 1px solid #FF0;
  background-color: #ccf; */
}

.file_button_container input {
  opacity: 0;
  position: absolute;
  top: 10;
  left: 0;
  z-index: 99;
  height: 30px;
  width: 30px;
  border: 1px solid #0F0;
}

.iconBtnOut {
  /*  Font container div  */
  background-color: #fff;
  color: #aaa;
  font-size: 1.4rem;
  text-align: center;
  border-radius: 5px 10px 8px;
  width: 30px;
  height: 30px;
}

.iconBtnOut:hover,
.iconBtnOut:active {
  color: #222;
  background-color: #add8e6;
}

.iconBtnOutL {
  border-radius: 10px 5px 8px;
}

.iconBtnOutR {
  border-radius: 5px 10px 8px;
}

.iconBtnIn {
  /*  Font  */
  margin-top: 4px;
}

JavaScript

console.clear();

var fileInput = document.getElementById('theFile');
fileInput.addEventListener("change", fileDialogChanged, false);

var paperclip = document.getElementById('paperclip');
paperclip.addEventListener("click", displayFileDialog, false);

function displayFileDialog() {
  if (fileInput && document.createEvent) {
    var evt = document.createEvent("MouseEvents");
    evt.initEvent("click", true, false);
    fileInput.dispatchEvent(evt);
  }
}

function fileDialogChanged() {
  var file = this.files[0];
  
  // Verify a file was selected
  if(!file) return;
  
  logit("Upload: " + file.name);

  var formData = new FormData();
  formData.append('file', file);

  var xhr = new XMLHttpRequest();
  xhr.addEventListener("progress", updateProgress);
  xhr.addEventListener("load", transferComplete);
  xhr.addEventListener("error", transferFailed);
  xhr.addEventListener("abort", transferCanceled);

  xhr.open('POST', '/echo/json/', true);
  xhr.send(formData);
}

// progress on transfers from the server to the client (downloads)
function updateProgress(oEvent) {
  if (oEvent.lengthComputable) {
    var percentComplete = oEvent.loaded / oEvent.total * 100;
    logit("Complete: " + percentComplete + "%");
  } else {
    // Unable to compute progress information since the total size is unknown
  }
}

function transferComplete(evt) {
  logit("The transfer is complete.<br>");
}

function transferFailed(evt) {
  logit("An error occurred while transferring the file.");
}

function transferCanceled(evt) {
  logit("The transfer has been canceled by the user.");
}

function logit(content) {
  /* console.log(content); */
  document.getElementById('display').innerHTML += content + "<br>";
}