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

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