title: File Upload from jquery popup in MVC 5 with jQuery Form plugin
body: <p>In my MVC 5 web application I need to upload file from jquery popup; in which containing MVC view model. I am referring answered question from <a href="https://stackoverflow.com/questions/16491659/ajax-upload-file-in-mvc">here</a>. According to this post I have defined my view as follows </p>
  
  <pre><code>@using VirtuOx.Views.Shared.Resources
  @model VirtuOx.Models.Common.PatientDocuments
  @{
      Layout = "~/Views/Shared/_LayoutBlank.cshtml";
  }
  &lt;script src="@Url.Content("~/Scripts/jquery.form.js")" type="text/javascript"&gt;&lt;/script&gt;
  @using (Html.BeginForm("UploadFile", "Common", FormMethod.Post, new { id = "frmReadingFiles", enctype = "multipart/form-data" }))
  {
      @Html.ValidationSummary();
      @Html.HiddenFor(m =&gt; m.HideDelete)
      @Html.HiddenFor(m =&gt; m.HideUpload)
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td class="align_right" style="width:20%;"&gt;@Html.LabelFor(m =&gt; m.hdReadingID)&lt;/td&gt;
              &lt;td&gt;@Html.DisplayFor(m =&gt; m.hdReadingID)@Html.HiddenFor(m =&gt; m.hdReadingID)&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td class="align_right"&gt;@Html.LabelFor(m =&gt; m.PatientName)&lt;/td&gt;
              &lt;td&gt;@Html.DisplayFor(m =&gt; m.PatientName)@Html.HiddenFor(m =&gt; m.PatientName)&lt;/td&gt;
          &lt;/tr&gt;
          @if (Model.HideUpload == "False")
          {
              &lt;tr&gt;
                  &lt;td class="align_right"&gt;@Html.LabelFor(m =&gt; m.FiltType)&lt;/td&gt;
                  &lt;td&gt;@Html.DropDownListFor(m =&gt; m.FiltType, new SelectList(Model.FileTypeList, "Value", "Text"), new { @class = "chzn-select-no-single" })&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="align_right"&gt;@Html.LabelFor(m =&gt; m.File)&lt;/td&gt;
                  &lt;td&gt;@Html.TextBoxFor(m =&gt; m.File, new { type = "file", name = "File[0]" })&lt;/td&gt;
              &lt;/tr&gt;
          }
      &lt;/table&gt;
      if (Model.HideUpload == "False")
      {
          &lt;div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"&gt;
              &lt;div class="ui-dialog-buttonset"&gt;
                  &lt;input type="submit" class="btn blue" id="btnUpload" value='@VirtuOxCommon.PatientDocuments_Button_Upload' /&gt;
                  &lt;input type="button" class="btn blue" id="PatientDocuments_btnClose" value="@VirtuOxCommon.PatientDocuments_Button_Close" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      }
  }
  @{Html.RenderPartial("_PatientDocuments", new ViewDataDictionary { { "ReadingID", Model.hdReadingID }, { "HideDelete", Model.HideDelete } });  }
  @if (Model.HideUpload == "True")
  {
      &lt;div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"&gt;
          &lt;div class="ui-dialog-buttonset"&gt;
              &lt;input type="button" class="btn blue" id="PatientDocuments_btnClose" value="@VirtuOxCommon.PatientDocuments_Button_Close" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  }
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $('#frmReadingFiles').ajaxForm({});
  
          $("#PatientDocuments_btnClose").click(function (e) {
              $(this).parents("div").find(".ui-dialog-content").dialog('close');
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I am opening this view in jquery modal dialog.</p>
  
  <p>&amp; my post action method is as follows</p>
  
  <pre><code> public ActionResult UploadFile(Common.PatientDocuments Documents, HttpPostedFileBase File)
      {
          try
          {
              byte[] data;
              using (Stream inputStream = File.InputStream)
              {
                  MemoryStream memoryStream = inputStream as MemoryStream;
                  if (memoryStream == null)
                  {
                      memoryStream = new MemoryStream();
                      inputStream.CopyTo(memoryStream);
                  }
                  data = memoryStream.ToArray();
              }
              if (data.Length &gt; 0)
              {
                  using (TransactionScope ts = new TransactionScope())
                  {
                      string path = string.Empty;
                      byte[] objContext = null;
                      DataSet ds = DB.ExecuteDataset("TrustedConnectionString", "pc_ADMReadingFileAdd",
                                              new SqlParameter("@SystemNumber", 1),
                                              new SqlParameter("@FileType", System.IO.Path.GetExtension(File.FileName)),
                                              new SqlParameter("@ReadingID", Documents.hdReadingID),
                                              new SqlParameter("@FileTypeID", Documents.FiltType),
                                              new SqlParameter("@FileName", System.IO.Path.GetFileNameWithoutExtension(File.FileName)),
                                              new SqlParameter("@CustomerID", SessionManager.GetSession().CustomerID));
  
  
                      if (ds != null &amp;&amp; ds.Tables[0].Rows.Count &gt; 0)
                      {
                          path = Convert.ToString(ds.Tables[0].Rows[0]["FilePath"]);
                          objContext = (byte[])ds.Tables[0].Rows[0]["TransactionContext"];
                          SqlFileStream objSqlFileStream = new SqlFileStream(path, objContext, FileAccess.Write);
                          objSqlFileStream.Write(data, 0, data.Length);
                          objSqlFileStream.Close();
                          ts.Complete();
                      }
                  }
              }
          }
          catch (Exception expObj)
          {
              ModelState.AddModelError("Error", "Error occured while uploading file " + expObj.StackTrace);
          }
          Documents.FileTypeList = Common.GetFileTypes();
          return PartialView("~/Views/Shared/PatientDocuments.cshtml", Documents);
      }
  </code></pre>
  
  <p>When I select the file &amp; clicks Upload button the required post action method gets executed but view is not reloaded; which results in jqGrid on popup not being reloaded to show newly uploaded file record.</p>
  
  <p>Can anybody tell me whats happening wrong in the flow &amp; why the popup view is not reloaded after successful execution of ajaxForm post method.</p>
  
  <blockquote>
    <p>Please Note that after successful execution of post method popup will remain as it is in browser &amp; when I close it &amp; reopens, it will show the jqGrid with uploaded file record</p>
  </blockquote>