title: Implementing progress .gif beside upload button
body: <p>I have an upload button on my MVC web application which allows a user to upload a file. This file is uploaded onto the system and some async actions are made on this file which may take up to 1/2 minutes. I would like show processing.gif when the users presses the upload button and then hide the .gif when the async actions have finished i.e. when "return View();" has occurred from the HttpPost Upload controller. Can anyone tell me the easiest way to implement this please? I have been messing around with it and can not get it to work correctly. The processing.gif image is currently hidden as you can see from the below code: </p>
  
  <p>The Upload View:</p>
  
  <pre><code>&lt;h4&gt;&lt;strong&gt;Upload Survey&lt;/strong&gt;&lt;/h4&gt;
  
  
  &lt;div&gt;
      &lt;p&gt;&lt;strong&gt;Upload Surveys in .PDF format&lt;/strong&gt;&lt;/p&gt;
      &lt;br /&gt;
  
      &lt;form class="btn btn-default" method="post" enctype="multipart/form-data" action="@Url.Action("Upload", "CompletedCamps")"&gt;
          &lt;div&gt;
              &lt;input name="file" type="file" class="btn btn-link" required /&gt;
              &lt;br /&gt;
              &lt;button type="submit" class="btn btn-block btn-primary"&gt;Import&lt;/button&gt;
  
          &lt;/div&gt;
  
      &lt;/form&gt;&lt;img id="loading" src="../../Content/processing.gif" alt="Updating ..." style="display:none" /&gt;
  &lt;/div&gt;
  &lt;br /&gt;
  </code></pre>
  
  <p>The Upload Controllers:</p>
  
  <pre><code>    [HttpGet] 
      public ActionResult Upload(int? id)
      {
          CompletedCamp completedCamp = db.CompletedCamps.Find(id);
          return View(completedCamp);
      }
  
      [HttpPost]
      public async Task&lt;ActionResult&gt; Upload(HttpPostedFileBase file, int? id)
      {
          CompletedCamp completedCamp = db.CompletedCamps.Find(id);
  
          string filename = Guid.NewGuid() + Path.GetExtension(file.FileName);
          string filepath = Server.MapPath(Path.Combine("~/Surveys/", filename));
          file.SaveAs(filepath);
          await AzureVisionAPI.ExtractToTextFile(filepath);
          ParseSurveyText parse1 = new ParseSurveyText();
          await Task.Run(() =&gt; parse1.ParseTextFile(completedCamp.RollNumber, completedCamp.OfficialSchoolName, completedCamp.Date));
  
  
  
          return View();
      }
  </code></pre>