JSFiddle - React, Tailwind, and code Playground

by Kumaresan S

HTML

<div onclick="add()">
hello
</div>
<input type="text" class="input_mul_file">

JavaScript

function add(a) {
 var file_len = document.querySelectorAll(".input_mul_file").length;
 file_len = (file_len) ? file_len + 1 : 1;
 var append = "<input id=mul_file" + file_len + " type=file name=mul_file[" + file_len + "] class=input_mul_file onchange=AlertFilesize('mul_file" + file_len + "') > Display on Front-End : <input type=checkbox name=display[" + file_len + "] class=input_mul_display  >What is This? :<input type=text name=file_whatisthis[" + file_len + "] class=file_display >";
 var div = document.getElementById("addmultiple");
 div.innerHTML += append
}
document.getElementById("material_attachment").addEventListener("change", checkFile, false);

function checkFile(e) {
 AlertFilesize("material_attachment");
}

function AlertFilesize(fileInput) {
 var re = /(\.bmp|\.gif|\.png)$/i;
 if (window.ActiveXObject) {
  var fso = new ActiveXObject("Scripting.FileSystemObject");
  var filepath = document.getElementById(fileInput).value;
  var thefile = fso.getFile(filepath);
  var sizeinbytes = thefile.size;
  var fname = thefile.name;
 } else {
  var sizeinbytes = document.getElementById(fileInput).files[0].size;
  var fname = document.getElementById(fileInput).files[0].name;
 }
 if (sizeinbytes > 2000000) {
  alert("Maxmimum file allowed size for upload is 2MB");
  document.getElementById(fileInput).value = "";
 } else if (re.exec(fname)) {
  alert("File extension not supported!");
  document.getElementById(fileInput).value = "";
 }
}