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

<div>

    @Html.Partial("Navbar", new HeuristicLab.Clients.Hive.WebJobManager.ViewModels.NavbarViewModel("Job"))


    <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>