JSFiddle - React, Tailwind, and code Playground

by davehol

JavaScript

(function() {

  document.addEventListener("DOMContentLoaded", function(event) {
    let fileInput = document.querySelectorAll('input[type=file]');
    let allowedFiles = [".doc", ".docx", ".pdf", ".JPG", ".jpg"];
    let regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(" + allowedFiles.join('|') + ")$");
    let fileMb = 0;
    let fileSize = 0;
    let errCnt = document.getElementById("tfa_11");
    for (let i = 0; i < fileInput.length; i++) {
      fileInput[i].addEventListener("change", function() {

        if ((this.files.length > 0) && (!regex.test(this.value.toLowerCase()))) {
          alert("bad file");
          let e = this.parentElement;
          e.parentElement.classList.add("errFld");
          let err = document.createElement("div");
          err.classList.add("errMsg");
          let spn = document.createElement("span");
          let errMesg = document.createTextNode("test");
          err.appendChild(spn).appendChild(errMesg);
          e.after(err);
        } else {
					let el = this.parentElement.nextSibling;
          console.log(el.length);
          if(el => 0){
          	el.remove();
          }
        }
        let fileInputtest = document.querySelectorAll('input[type=file]');
        for (let k = 0; k < fileInputtest.length; k++) {
          if (fileInputtest[k].files.length > 0) {
            fileSize = fileSize + fileInputtest[k].files.item(0).size;
            fileMb = fileSize / 1024 ** 2;
          }
					if (this.parentElement.nextSibling) {         
          	errCnt.value = "1";
          }else{
          	errCnt.value = "";
          }
        }
        alert(errCnt.value);
      });
    }
  });
})();