@model UploadViewModel;
Hello from Upload Index!

<form id="uploadForm" action="Upload" method="post" 
    enctype="multipart/form-data" onsubmit="AJAXSubmit(this);return false;">
    <dl>
        <dt>
            <label for="file">File</label>
        </dt>
        <dd>
            <input id="file" type="file" name="file" />
        </dd>
    </dl>

    <input class="btn" type="submit" value="Upload" />

    <div style="margin-top:15px">
        <output form="uploadForm" name="result"></output>
    </div>
</form>

@foreach (var item in Model.AvailableRoots.OrderBy(x => x.Item1))
{
  <div>@item.Item1</div>
}

@section Scripts {
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
            asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
            asp-fallback-test="window.jQuery"
            crossorigin="anonymous"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
    </script>

  <script>
    "use strict";

    async function AJAXSubmit (oFormElement) {
      const formData = new FormData(oFormElement);

      try {
        const response = await fetch(oFormElement.action, {
          method: 'POST',
          headers: {
            'RequestVerificationToken': getCookie('RequestVerificationToken')
          },
          body: formData
        });

        oFormElement.elements.namedItem("result").value = 
          'Result: ' + response.status + ' ' + response.statusText;
      } catch (error) {
        console.error('Error:', error);
      }
    }

    function getCookie(name) {
      var value = "; " + document.cookie;
      var parts = value.split("; " + name + "=");
      if (parts.length == 2) return parts.pop().split(";").shift();
    }
  </script>
}