title: How to receive File in [FromBody] ASP.NET CORE 2 & Angular 5
body: <p>I want to send file image from my Angular 5 Reactive form to my ASP.NET 
  so far I did this : </p>
  
  <p>my Angular: </p>
  
  <p><strong>Organization Interface:</strong> </p>
  
  <pre><code>export interface Organization {
      id: number;
      organizationName: string;
      legalName: string;
      logoUrl: string;
      logoFile: any;
      ....
  }
  </code></pre>
  
  <p><strong>organization.form.html</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form [formGroup]="editForm" (ngSubmit)="save()" class="form-horizontal"&gt;
    ...
    &lt;div class="form-group  required" [ngClass]="{'has-error': editForm.get('legalName').touched &amp;&amp; editForm.get('legalName').hasError('required')}"&gt;
      &lt;label class="col-sm-2" for="legalName"&gt;Legal/Trading Name&lt;/label&gt;
      &lt;div class="col-sm-7"&gt;
        &lt;input class="form-control" placeholder="Legal/Trading Name" formControlName="legalName"&gt;
        &lt;span class="help-block" *ngIf="editForm.get('legalName').touched &amp;&amp; editForm.get('legalName').hasError('required')"&gt;Legal/Trading Name is required&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group  required" [ngClass]="{'has-error': editForm.get('logoUrl').touched &amp;&amp; editForm.get('logoUrl').hasError('required')}"&gt;
      &lt;label class="col-sm-2" for="logoUrl"&gt;Logo&lt;/label&gt;
      &lt;div class="col-sm-7"&gt;
        &lt;input type="file" accept="image/*" name="logoFile" placeholder="Logo" (change)="showPreviewImage($event)"&gt;
        &lt;img [src]="localUrl" width="150" *ngIf="localUrl" class="imagePlaceholder"&gt;
        &lt;input type="hidden" name="fileHidden" formControlName="logoUrl" /&gt;
        &lt;!-- Validation Field --&gt;
  
        &lt;span class="help-block" *ngIf="editForm.get('logoUrl').touched &amp;&amp; editForm.get('logoUrl').hasError('required')"&gt;Logo is required&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>organization-form.component.ts</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// i want to display a upload image so I put on localImg
  
  showPreviewImage(event: any) {
    if (event.target.files &amp;&amp; event.target.files[0]) {
      var reader = new FileReader();
      var file = event.target.files[0];
      reader.readAsDataURL(file);
      reader.onload = () =&gt; {
        this.localImg= reader.result;
  
        this.editForm.patchValue({
          logoUrl: file.name,
          logoFile: reader.result,
        });
        this.editForm.markAsDirty();
      }
    }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>when save button clicked : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>save() {
    this.onSubmit.emit(this.editForm.value); 
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Next I send to my asp.net core 2 server with HttpClient:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>create(org: Organization) {
    return this.httpClient.post(this.baseUrl + 'organization/create', org);
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I send the image and the data and I can see on my chrome inspect network:
  <a href="https://i.stack.imgur.com/of7GD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/of7GD.png" alt="data sent to asp.net server"></a></p>
  
  <p>While on server controller:</p>
  
  <pre><code>[HttpPost("create")]
          public async Task&lt;IActionResult&gt; CreateOrganization([FromBody] OrganizationDto orgDto)
          {
              // check the same name of organization
              if (await _orgRepo.OrganizationExist(orgDto.OrganizationName))
              {
                  ModelState.AddModelError("OrganizationName", "Organization Name already exists");
              }
              if (!ModelState.IsValid)
                  return BadRequest(ModelState);
              var orgToCreate = _mapper.Map&lt;Organization&gt;(orgDto);
              var file = orgDto.LogoFile;
              if(file != null) {
                  using (var stream = new FileStream(this.logosFolderPath, FileMode.Create))  
                  {  
                      await file.CopyToAsync(stream);  
                      orgToCreate.LogoUrl = Path.GetFileName(file.FileName);
                      throw new Exception(orgDto.LogoUrl);
                  }  
              }
              // var createdOrg = await _orgRepo.CreateOrganization(orgToCreate);
              // var orgToReturn = _mapper.Map&lt;OrganizationDetailedDto&gt;(createdOrg);
  
              // return Ok(orgToReturn);
              return Ok(orgDto);
          }
  </code></pre>
  
  <p>my OrganizationDto:</p>
  
  <pre><code>public class OrganizationDto
      {
          [Required]
          public int Id { get; set; }
          [Required]
          public string OrganizationName { get; set; }
          [Required]
          public string LegalName { get; set; }
          [Required]
          public string LogoUrl { get; set; }
          public IFormFile LogoFile {get;set;}
  </code></pre>
  
  <p>but when I debug this, the variabel orgDto is null (not initialized or receiving data from angular). If I set the logoFile to blank in Angular, it work... but when I put file in it ... it doesnt work. </p>
  
  <p>Any idea how to handle this ? I read the web we cannot use multipart/form-data in form ... i still have no idea about this. please help. thank you </p>