source: branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/UploaderPartial/_UploaderPartial.cshtml @ 13827

<div class="panel panel-default"
     style="border-width:2px!important;padding:17px;
                        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">


        <form method="post"
               asp-action="Uploader"
               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"
                  style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                                 text-shadow:1px 1px black;">
                 <i class="fa fa-folder-open-o"></i> Choose file(s) to upload to the server
             </div>

             <div class="row" style="margin:10px">

                 <div id="selectedfiles">
                 <h3>Files</h3>
                 <p>No files selected: press the above button to choose files</p>
                 </div>

                 <button style="margin-bottom:10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                                 text-shadow:2px 2px black;"
                      type="button"
                         disabled
                      id="del"
                      class='btn btn-danger'
                      onclick='deletefiles()'>
                     <span class='glyphicon glyphicon-trash' aria-hidden='true'></span>
                     Remove files
                 </button>

                 <div
                      style="margin-top:20px;margin-bottom:20px">

                     <label for="basic-url">Directory name</label>
                     <div class="input-group">
                         <span class="input-group-addon"
                               id="basic-addon3">
                             .../uploads/@ViewBag.Name
                         </span>
                         <input
                                type="text"
                                disabled
                                class="form-control"
                                id="directory"
                                name="directory"
                                aria-describedby="basic-addon3"
                                value="@(DateTime.Now.ToString("yyyy.MM.dd"))" />
                     </div>
                 </div>
                 <button style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                                 text-shadow:2px 2px black;"
                        disabled
                         id="upl"
                        class="btn btn-lg btn-block btn-success"
                        type="submit"
                         >
                     <i class="fa fa-plus-square"></i> Add to uploads
                     </button>
             </div>

    </form>
</div>

<script type="text/javascript">
    function printFiles() {
        var div = document.getElementById("selectedfiles");
        var files = document.getElementById("files").files;
        div.innerHTML = "<h3>Files</h3>";
        if (files.length > 0) {
            document.getElementById("upl").disabled = false;
            document.getElementById("del").disabled = false;
            document.getElementById("directory").disabled = false;

            
            for (var i = 0; i < files.length; i++) {
                div.innerHTML += "<p>File " + (i + 1) + ":" + files[i].name +
                    "</p>";
            }

        }
        else {
            div.innerHTML += "<p>No files selected</p>";
            document.getElementById("upl").disabled = true;
            document.getElementById("del").disabled = true;
            document.getElementById("directory").disabled = true;
        }

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

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