source: branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/Upload.cshtml @ 13719

<div>

    <ul class="nav nav-tabs">
        <li role="presentation" class="active"><a asp-controller="Job" asp-action="Index">Jobs <span class="badge"></span></a></li>
        <li role="presentation"><a asp-controller="User" asp-action="Index">User management</a></li>
        <li role="presentation"><a asp-controller="Resource" asp-action="Index">Resources</a></li>
    </ul>
    <div style="margin:10px">
        <form method="post" asp-action="Upload" asp-controller="Job" enctype="multipart/form-data">
            <input onchange="printFiles()" type="file" id="files" name="files" multiple accept=".hl" style="display:none" />
            <div onclick="firefilebutton()" class="btn btn-info btn-lg btn-block  ">Choose file(s)</div>
            <div class="row" style="margin:10px">
                <div id="selectedfiles"></div>
                   <div style="visibility:hidden;  margin-bottom:10px;" id="del" class='btn btn-danger' onclick='deletefiles()'>
                    <span class='glyphicon glyphicon-trash' aria-hidden='true'></span>  Remove files
                </div>
                <input style="visibility:hidden;" id="upl" class="btn btn-lg btn-block btn-success" type="submit" value="Check contents" />
            </div>

        </form>
    </div>

    <script type="text/javascript">
        function printFiles() {
            var div = document.getElementById("selectedfiles");
            var files = document.getElementById("files").files;
            div.innerHTML = "";
            if (files.length > 0) {
                document.getElementById("upl").style.visibility = "visible";
                document.getElementById("del").style.visibility = "visible";

                div.innerHTML += "<h3>Files</h3>";
                for (var i = 0; i < files.length; i++) {
                    div.innerHTML += "<p>File " + (i + 1) + ":" + files[i].name +
                        "</p>";
                }
                
            }
            else{
                document.getElementById("upl").style.visibility = "hidden";
                document.getElementById("del").style.visibility = "hidden";
            }

        }
        function firefilebutton() {
            document.getElementById("files").click();

        }
        function deletefiles() {
            var filesarr = document.getElementById("files").files;
            document.getElementById("files").value = "";
            printFiles();
        }
    </script>
</div>