LeafWeb/Web/Views/LeafInput/Index.cshtml

@model LeafWeb.Web.ViewModels.LeafInput.CreateViewModel
@section Styles
{
    @Styles.Render("~/backload/blueimp/bootstrap/BasicPlusUI/css")
}

<h1>Submitting Data and Retrieving EDO Results</h1>
<p>
    There is no limit on the number of files you may submit for analysis. Keep selecting files and hitting the Add button until all of the files you need to upload are shown in the list. Then enter an identifier for this set of data and click the Upload button.
</p>

@Html.Partial("_StatusMessage")

<div class="row">
    <div class="col-md-7 well">
        @Html.Partial("_ValidationSummary")
        <!-- The file upload form used as target for the file upload widget -->
        <form id="fileupload" action="/Backload/FileHandler" method="POST" enctype="multipart/form-data">
            <label class="control-label">Files</label>
            <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
            <div class="row fileupload-buttonbar">
                <div class="col-lg-5">
                    <!-- The fileinput-button span is used to style the file input field as button -->
                    <span class="btn btn-default fileinput-button">
                        <i class="glyphicon glyphicon-plus"></i>
                        <span>Add files...</span>
                        <input type="file" name="files[]" multiple>
                    </span>
                    <button type="button" class="btn btn-default delete">
                        <i class="glyphicon glyphicon-trash"></i>
                        <span>Delete</span>
                    </button>
                    <input type="checkbox" class="toggle">
                    <!-- The global file processing state -->
                    <span class="fileupload-process"></span>
                </div>
                <!-- The global progress state -->
                <div class="col-lg-7 fileupload-progress fade">
                    <!-- The global progress bar -->
                    <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                        <div class="progress-bar progress-bar-success" style="width: 0%;"></div>
                    </div>
                    <!-- The extended global progress state -->
                    @*<div class="progress-extended">&nbsp;</div>*@
                </div>
            </div>
            @Html.Partial("_ValidationField", "Files")
            <!-- The table listing the files available for upload/download -->
            <table role="presentation" class="table table-striped panel panel-default"><tbody class="files"></tbody></table>
        </form>
        @using (Html.BeginForm("Index", "LeafInput", FormMethod.Post))
        {
            @Html.EditorFor(m => m.PhotosynthesisType)
            @Html.EditorFor(m => m.Identifier)
            @Html.EditorFor(m => m.SiteId)
            @Html.EditorFor(m => m.Name)
            @Html.EditorFor(m => m.Email)
            @Html.EditorFor(m => m.EmailConfirm)
            <input type="submit" id="submit-form" class="hidden" />
        }
        <label for="submit-form" class="btn btn-primary pull-right">Submit...</label>
    </div>
</div>

<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
    {% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td>
            <p class="name">{%=file.name%}</p>
            <strong class="error text-danger"></strong>
        </td>
        <td>
            <p class="size">Processing...</p>
            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
            <div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
        </td>
        <td>
            {% if (!i && !o.options.autoUpload) { %}
            <button class="btn btn-xs btn-primary start" disabled>
                <i class="glyphicon glyphicon-upload"></i>
                <span>Start</span>
            </button>
            {% } %}
            {% if (!i) { %}
            <button class="btn btn-xs btn-warning cancel">
                <i class="glyphicon glyphicon-ban-circle"></i>
                <span>Cancel</span>
            </button>
            {% } %}
        </td>
    </tr>
    {% } %}

</script>

<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
    {% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
        <td>
            <p class="name">
                {% if (file.url) { %}
                <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}">{%=file.name%}</a>
                {% } else { %}
                <span>{%=file.name%}</span>
                {% } %}
            </p>
            {% if (file.error) { %}
            <div><span class="label label-danger">Error</span> {%=file.error%}</div>
            {% } %}
        </td>
        <td>
            <span class="size">{%=o.formatFileSize(file.size)%}</span>
        </td>
        <td>
            {% if (file.deleteUrl) { %}
            <button class="btn btn-xs btn-default delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}" {% if (file.deletewithcredentials) { %} data-xhr-fields='{"withCredentials":true}' {% } %}>
                <i class="glyphicon glyphicon-trash"></i>
                <span>Delete</span>
            </button>
            <input type="checkbox" name="delete" value="1" class="toggle">
            {% } else { %}
            <button class="btn btn-xs btn-warning cancel">
                <i class="glyphicon glyphicon-ban-circle"></i>
                <span>Cancel</span>
            </button>
            {% } %}
        </td>
    </tr>
    {% } %}

</script>

@section Scripts
{
    <!-- Scripts for the jQquery File Upload Plugin in Basic Plus UI style* -->
    @Scripts.Render("~/backload/blueimp/bootstrap/BasicPlusUI")
    <!-- jQuery autocomplete* -->
    @Scripts.Render("~/bundles/autocomplete")
    <!-- The application script -->
    <script src="/Scripts/LeafInput.js"></script>
    <script type="text/javascript">
        initFileUpload("@Session.SessionID");
        $('input#SiteId').autocomplete({
            serviceUrl: '/FluxnetSite/Autocomplete'
        });
    </script>
}