title: How to deal with input=file / IFormFile two-way binding in Razor Pages
body: <p>I have an entity that has byte[] to store logos in the database as varbinary. But to use this model on a Razor Page, I have extended it and added a IFormFile property to receive the uploaded file.</p>
  <pre><code>public class Company
  { 
      public string Name { get; set; }
      public byte[] Logo { get; set; }
  }
  </code></pre>
  <pre><code>public class CompanyModel : Company 
  { 
      [DataType(DataType.Upload)]
      [FromForm(Name = &quot;UploadedLogo&quot;)]
      public IFormFile UploadedLogo { get; set; }
  }
  </code></pre>
  <p>And in a method I fetch this company from the database and set IFormFile accordingly:</p>
  <pre><code>var response = await _companyService.GetByIdAsync(id);
  if (response != null)
  {
      if (response.Logo != null)
      {
          using (var stream = new MemoryStream(response.Logo))
          {
              var formFile = new FormFile(stream, 0, stream.Length, response.Name, response.Name);
              formFile.Headers = new HeaderDictionary()
              {
                  new KeyValuePair&lt;string, StringValues&gt;(&quot;Content-Disposition&quot;, $&quot;form-data; name=\&quot;Company.UploadedLogo\&quot;; filename=\&quot;{response.Name}.png\&quot;&quot;),
                  new KeyValuePair&lt;string, StringValues&gt;(&quot;Content-Type&quot;, &quot;image/png&quot;),
              };
              response.UploadedLogo = formFile;
          }
      }
  
      return response;
  }
  </code></pre>
  <p>And the UploadedLogo is populated and I bind that on Razor Page</p>
  <pre><code>&lt;form method=&quot;post&quot;
        enctype=&quot;multipart/form-data&quot;
        data-ajax=&quot;true&quot;
        data-ajax-method=&quot;post&quot;
        data-ajax-begin=&quot;begin&quot;
        data-ajax-complete=&quot;completed&quot;
        data-ajax-failure=&quot;failed&quot;&gt;
      ...
      &lt;div class=&quot;form-group row&quot;&gt; 
          &lt;div class=&quot;col-sm-2 text-right&quot;&gt;
              &lt;label asp-for=&quot;@Model.Company.Logo&quot; class=&quot;col-form-label&quot;&gt;&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-sm-9&quot;&gt;
              &lt;input type=&quot;file&quot; class=&quot;dropify&quot; data-height=&quot;200&quot;
                     asp-for=&quot;@Model.Company.UploadedLogo&quot;
                     data-max-file-size=&quot;100K&quot; data-allowed-file-extensions=&quot;png jpg jpeg&quot; /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      ...
      &lt;div class=&quot;form-group modal-actions&quot;&gt;
          &lt;input type=&quot;submit&quot; class=&quot;btn btn-primary btn-icon-text btn-md btn-save-editing&quot; value=&quot;Save&quot; /&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <p>By the way, I am using <a href="https://github.com/JeremyFagis/dropify" rel="nofollow noreferrer">Dropify</a> as file upload plugin and <a href="https://github.com/aspnet/jquery-ajax-unobtrusive" rel="nofollow noreferrer">jquery-ajax-unobtrusive</a> library to handle post requests. Here is the post method:</p>
  <pre><code>public async Task&lt;CompanyModel&gt; OnPostAsync(CompanyModel company)
  {
      CompanyModel result = new CompanyModel();
  
      try
      {
          if (company.UploadedLogo != null)
              company.Logo = await company.UploadedLogo.GetBytes();
  
          var response = await _companyService.SaveAsync(company);
          if (response != null)
              result = response;
      }
      catch (Exception ex)
      {
          _Logger.LogException(ex);
      }
  
      return result;
  }
  </code></pre>
  <p>Now here is the scenario:</p>
  <ul>
  <li>When I am adding a new company, I enter company name and browse a file from my computer, and save the data. I can see Uploaded logo in company model received in post request, which is then converted to byte[] and saved in database. Everything is fine. Below is the fiddler capture:
  <a href="https://i.stack.imgur.com/WRHln.png" rel="nofollow noreferrer">Fiddler capture for INSERT</a></li>
  <li><strong>Problem starts</strong> when I try to edit the company. I open the company, service fetches the data, convert byte[] to IFormFile and the data (name + logo) is shown on the form. I just edit the name, do not touch the logo and let it be as it is and hit save. At this point, the Uploaded logo is null in company model received in post request. Below is the fiddler capture:
  <a href="https://i.stack.imgur.com/scUt4.png" rel="nofollow noreferrer">Fiddler capture for UPDATE</a></li>
  </ul>
  <p>I can see the difference in the posted requests captures clearly. The file is not there in the case of edit. But I don't know how to fix this. It has been a day I am hurting my brain on this, can anyone assist me on this please?</p>
  <p><strong>UPDATE:</strong> Added fiddler captures as well.</p>