title: Display Upload Progress in Modal with Bootstrap Progress Bar
body: <p>I have an c# MVC application that I'm building, that presents a form and allows the user to upload some files. When the user clicks submit a modal appears with a progress bar, set to 100% and displays a message of "please wait, ect. "</p>
  
  <p>I want to be able to capture the progress of the upload process and display it in the modal's progress bar. </p>
  
  <p>So after a bit of Google searches I've come up with <a href="https://stackoverflow.com/questions/24545780/bootstrap-progress-bar-for-mvc-file-upload">this solution</a>, but I'm unsure how to adapt it to my current situation. </p>
  
  <p>Here is my Code:</p>
  
  <p>Index.cshtml</p>
  
  <pre><code>&lt;h4&gt;Please fill out the form below and select at least one file to upload.&lt;/h4&gt;
  
  @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data", id = "upldFrm" }))
  {
      &lt;div class="row"&gt;
          &lt;div class="col-md-2"&gt;
              &lt;h5&gt;Your Name:&lt;/h5&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4"&gt;
              &lt;input type="text" name="uname" class="form-control" required placeholder="John Smith"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-2"&gt;
              &lt;h5&gt;Your Email:&lt;/h5&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4"&gt;
              &lt;input type="email" name="email" class="form-control" required placeholder="test@test.com"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-2"&gt;
              &lt;h5&gt;Your Company:&lt;/h5&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4"&gt;
              &lt;input type="text" name="company" class="form-control" required placeholder="Test Company, Inc"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-2"&gt;
              &lt;h5&gt;Choose file(s) to upload (Max 500MB):&lt;/h5&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4"&gt;
              &lt;input name="files" type="file" id="files" multiple="multiple" class="form-control" required /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-2"&gt;
              &lt;h5&gt;&lt;/h5&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4"&gt;
              &lt;input id="sbmtBtn" type="submit" name="submit" value="Upload" class="btn btn-primary" data-toggle="modal" data-target="#myModal" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  }
  
  &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;h1&gt;Uploading...&lt;/h1&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  Please wait while we are uploading your files
                  &lt;div class="progress"&gt;
                      &lt;div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      $('sbmtBtn').on('click', function ()
      {
          $('#upldFrm').submit();
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is my controller</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.IO;
  using System.Linq;
  using System.Web;
  using System.Web.Mvc;
  using System.Net.Mail;
  
  namespace vidup.Controllers
  {
      public class HomeController : Controller
      {
          public ActionResult Index()
          {
  
              return View();
          }
  
          [HttpPost]
          public ActionResult Index(List&lt;HttpPostedFileBase&gt; files)
          {
              var userName = Request["uname"].ToString();
              var userEmail = Request["email"].ToString();
              var userCompany = Request["company"].ToString();
              ViewBag.Username = userName;
              ViewBag.UserCompany = userCompany;
              ViewBag.UserEmail = userEmail;
              int i = 0;
  
              var path = Path.Combine(Server.MapPath("~/Uploads"), userCompany, userName, DateTime.Now.ToString("MM-dd-yyyy h-mm-tt"));
              if (!Directory.Exists(path))
              {
                  DirectoryInfo di = Directory.CreateDirectory(path);
              }
  
              foreach (HttpPostedFileBase item in files)
              {
                  i++;
                  if (item != null &amp;&amp; item.ContentLength &gt; 0)
                  {
                      var fileName = Path.GetFileName(item.FileName);
                      var fullPath = Path.Combine(path, fileName);
                      ViewBag.Message3 = fileName;
                      ViewBag.Message4 = fullPath;
                      try
                      {
                          item.SaveAs(fullPath);
                          var fileCount = i + " File(s) uploaded successfully";
                          ViewBag.Message = fileCount;
                      }
                      catch (Exception e)
                      {
                          ViewBag.Message = e;
                      }
                  }
                  else
                  {
                      ViewBag.Message = "No File selected";
                  }
              }
              return View("Status");
          }
  
          public ActionResult Status()
          {
              return View();
          }
  
      }
  }
  </code></pre>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I have tried to add in the code from the post i provided, but im getting a error </p>
  
  <pre><code>Uncaught ReferenceError: formdata is not defined
  </code></pre>
  
  <p>This is what my view looks like now, can anyone direct me on why I'm getting this error? Or how to resolve it? </p>
  
  <pre><code>&lt;div class="row"&gt;
          &lt;div class="col-md-2"&gt;
              &lt;h5&gt;Choose file(s) to upload (Max 500MB):&lt;/h5&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4"&gt;
              &lt;input name="files" type="file" id="files" multiple="multiple" class="form-control" required /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-2"&gt;
              &lt;h5&gt;&lt;/h5&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4"&gt;
              &lt;input id="sbmtBtn" name="submit" value="Upload" class="btn btn-primary" onclick="submitForm()"/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  }
  
  &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;h1&gt;Uploading...&lt;/h1&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  Please wait while we are uploading your files
                  &lt;div class="progress"&gt;
                      &lt;div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      function submitForm() {
          $('#myModal').modal('show');
          var file=document.getElementById('files').files[0];
          var formData = new FormData();
          formdata.append("file_name", file);
          ajax = new XMLHttpRequest();
          ajax.upload.addEventListener("progress", progressHandler, false);
          ajax.addEventListener("load", completeHandler, false);
          ajax.open("POST", '@Url.Action("Index","Home")', true)
          ajax.send(formdata);
      }
  
      function progressHandler(event){
          var percent = (event.loaded / event.total) * 100;
          $('.bar').width(percent);
      }
  
      function completeHandler(){
          $('#myModal').modal('hide');
          $('.bar').width(100);
      }
  
      //$('sbmtBtn').on('click', function ()
      //{
      //    $('#upldFrm').submit();
      //});
  &lt;/script&gt;
  </code></pre>