JSFiddle - React, Tailwind, and code Playground

HTML

<input type="file" name="fileUpload" size="50" id="file1" multiple/> 

<table border="1" id="uploadTable" style="visibility:hidden">
     	
		   <tr> <th>SNo</th><th>FileName</th><th>Action</th> </tr>
	<!-- 	  <tr><td><input type="text" name="sno" id="sno"/></td>
				<td><input type="text" name="fileName" id="fileName"/></td> 
                <td><input type="text" name="fileSize" id="fileSize"/></td>
              <td width="100%"><a href="delete" id="deleteButton">Delete</a></td>
    </tr>    -->

JavaScript

var rowN = 0;var count = 1;
 document.getElementById("file1").onchange = function() {
 	document.getElementById("uploadTable").style.visibility="visible";
 	var filename = "sample.txt";
 	 
    var table = document.getElementById("uploadTable");
    
     var row = '<tr><td><input type="text" name="sno" id="sno' + rowN + '" value="' + count + '"/></td><td><input type="text" name="fileName" id="fileName' + rowN + '" value="' + filename + '"/></td> <td width="100%">delete</td></tr>'; 
     //document.getElementById("uploadTable").value = file.size + " bytes";
     //document.getElementById("fileName").value = file.name;
 	  table.innerHTML = table.innerHTML + row;  
     rowN++;
     count++;
 	};