JSFiddle - React, Tailwind, and code Playground

HTML

<p><strong>Upload Files:</strong> <input type="file" name="filesToUpload" id="filesToUpload" onChange="makeFileList();" /></p>



<ul id="fileList"><li>No Files Selected</li></ul>

JavaScript

function makeFileList() {
        var input = document.getElementById("filesToUpload");
        var ul = document.getElementById("fileList");
        while (ul.hasChildNodes()) {
            ul.removeChild(ul.firstChild);
        }
        for (var i = 0; i < input.files.length; i++) {
            var li = document.createElement("li");
            var fileSize = input.files[i].size;
            li.innerHTML = input.files[i].name +"&nbsp;"+ "<span id=\"lblSize\"></span><input onclick=\"clearFileInput()\" type=\"button\" value=\"Clear\" \/>";
            ul.appendChild(li);
        }
        if(!ul.hasChildNodes()) {
            var li = document.createElement("li");
            li.innerHTML = 'No Files Selected';
            ul.appendChild(li);
        }
    };
    
    
    function clearFileInput(){
        var oldInput = document.getElementById("filesToUpload");
        var newInput = document.createElement("input");
        newInput.type = "file";
        newInput.id = oldInput.id;
        newInput.name = oldInput.name;
        newInput.className = oldInput.className;
        newInput.style.cssText = oldInput.style.cssText;
        // copy any other relevant attributes
        oldInput.parentNode.replaceChild(newInput, oldInput);
    };