title: How send image as byte array from Angular 9 to C# Web API Core, like are property of object? CRUD Client aplication with image
body: <p>Frontend - Angular 9</p>
  <p>Backend - ASP.NET Core Web API
  /<br />
  Middleware Entity Framework 6.0
  /
  MS SQL SERVER</p>
  <ol>
  <li><p>I don't know what type of object property I must set in Angular?</p>
  </li>
  <li><p>How I can add an image to my object and send them to Web Api?</p>
  </li>
  <li><p>How I can show them back in Angular app?</p>
  </li>
  </ol>
  <p>Web API Controller POST:</p>
  <pre><code>    [HttpPost]
      public async Task&lt;ActionResult&lt;Leaks&gt;&gt; PostLeaks(Leaks leaks)
      {
          // DateTime and Username implemented to backend
          DateTime curDate = DateTime.Now;
          leaks.Date = curDate;
  
          var currentUser = HttpContext.User;
          string userLastname = currentUser.Claims.FirstOrDefault(c =&gt; c.Type == &quot;lastname&quot;).Value;
          leaks.Repairer = userLastname;
          //
          _context.Leaks.Add(leaks);
          await _context.SaveChangesAsync();
  
          return CreatedAtAction(&quot;GetLeaks&quot;, new { id = leaks.Id }, leaks);
      }
  </code></pre>
  <p>Leaks.cs:</p>
  <pre><code>public partial class Leaks
  {
      public int Id { get; set; }
      public string Sn { get; set; }
      public string ShiftSmt { get; set; }
      public string ShiftMi { get; set; }
      public string Location { get; set; }
      public DateTime? Date { get; set; }
      public string Repairer { get; set; }
      public string AoiResult { get; set; }
      public string OperatorSmt { get; set; }
      public string ModelSmt { get; set; }
      public string Platform { get; set; }
      public string Remark { get; set; }
      public string Defect { get; set; }
      public byte[] Image { get; set; }
      public string Status { get; set; }
      public string Side { get; set; }
      public string Extra1 { get; set; }
      public string Extra2 { get; set; }
  }
  </code></pre>
  <p>MS SQL <strong>Image</strong> data type is <strong>varbinary(MAX)</strong></p>
  <p>Leaks.component.ts:</p>
  <pre><code>  // *ngOnInit start
    ngOnInit() {
    //Selected options loader
    this.platformsService.getAllPlatforms()
    .subscribe(res =&gt; this.platforms = res as []);
  
    this.defectslistService.getAllDefectslist()
    .subscribe(res =&gt; this.defect = res as []);
  
    // input form validation
    this.leaksForm = this.formbulider.group({ 
      Date:[null],
      Sn:[null, [Validators.required]],
      ShiftMI:[null, [Validators.required]],
      ShiftSMT:[null, [Validators.required]],
      Location:[null, [Validators.required]],
      Defect:[null, [Validators.required]],
      Side:[null, [Validators.required]],
      AoiResult:[null],
      Platform:[null, [Validators.required]],
      ModelSMT:[null],
      OperatorSMT:[null],
      Repairer:[null],
      Image:[null],
      Remark:[null],
      Status:[null, [Validators.required]],
    });
    // *load all data from Database*
    this.loadallLeaks();
    this.toastr.info(&quot;Init Successfully Done&quot;);
  
    //*Angular mat-table*
    this.leaksService.getAllLeaks().subscribe(list =&gt; {
        let array = list.map(item =&gt; {
          return { ...item };
        });
        this.listData = new MatTableDataSource(array);
        this.listData.sort = this.sort;
        this.listData.paginator = this.paginator;
        this.isLoading = false;
      });
    //*Angular mat-table end*
    
    }
    // *ngOnInit end*
  
    loadallLeaks() {
    
    this.allLeaks = this.leaksService.getAllLeaks();
    
    this.leaksService.getAllLeaks().subscribe(res =&gt; {
      this.dataSource = new MatTableDataSource(res);
    })
  
    this.toastr.info(&quot;Data Was Successfully Loaded&quot;);
    }
  
    onFormSubmit() {
    this.dataSaved = false;
    const leaks = this.leaksForm.value; 
    this.CreateLeaks(leaks);
    this.leaksForm.reset();
    }
  
    loadLeaksToEdit(leaksId: string) {
  
    this.leaksService.getLeaksById('/'+leaksId).subscribe(leaks=&gt; {
    this.massage = null;
    this.dataSaved = false;
    this.leaksIdUpdate = leaks.Id;
    this.leaksForm.controls['Sn'].setValue(leaks.Sn);
    this.leaksForm.controls['Date'].setValue(leaks.Date);
    this.leaksForm.controls['ShiftSMT'].setValue(leaks.ShiftSMT); 
    this.leaksForm.controls['ShiftMI'].setValue(leaks.ShiftSMT); 
    this.leaksForm.controls['Location'].setValue(leaks.Location);
    this.leaksForm.controls['Defect'].setValue(leaks.Defect);
    this.leaksForm.controls['Side'].setValue(leaks.Side);
    this.leaksForm.controls['AoiResult'].setValue(leaks.AoiResult);
    this.leaksForm.controls['Platform'].setValue(leaks.Platform);
    this.leaksForm.controls['ModelSMT'].setValue(leaks.ModelSMT);
    this.leaksForm.controls['OperatorSMT'].setValue(leaks.OperatorSMT);
    this.leaksForm.controls['Remark'].setValue(leaks.Remark);
    this.leaksForm.controls['Repairer'].setValue(leaks.Repairer);
    this.leaksForm.controls['Image'].setValue(leaks.Image);
    this.leaksForm.controls['Status'].setValue(leaks.Status);
  
    });
    
    }
  
    CreateLeaks(leaks: Leaks) {
    if (this.leaksIdUpdate == null) {
      this.leaksService.createLeaks(leaks).subscribe(
      () =&gt; {
      this.dataSaved = true;
      this.toastr.success(&quot;Record Saved Successfully&quot;);
      this.loadallLeaks();
      this.leaksIdUpdate = null;
      this.leaksForm.reset();
    } );
    } else {
      leaks.Id = this.leaksIdUpdate;
      this.leaksService.updateLeaks(leaks).subscribe(() =&gt; {
      this.dataSaved = true;
      this.toastr.success(&quot;Record Updated Successfully&quot;);
      this.loadallLeaks();
      this.leaksIdUpdate = null;
      this.leaksForm.reset();
    }); }
    } 
    deleteLeaks(leaksId: string) {
    if (confirm(&quot;Are you sure you want to delete this ?&quot;)) { 
      this.leaksService.deleteLeaksById(leaksId).subscribe(() =&gt; {
      this.dataSaved = true;
      this.toastr.warning(&quot;Record Deleted Succefully&quot;); 
      this.loadallLeaks();
      this.leaksIdUpdate = null;
      this.leaksForm.reset();
    }); }
    }
    resetForm() {
    this.leaksForm.reset();
    this.massage = null;
    this.dataSaved = false;
    this.toastr.info(&quot;Form Succefully reseted&quot;);
    }
  </code></pre>
  <p>leaks.ts:</p>
  <pre><code>export class Leaks {
  Id:number;
  Date:string;
  Sn:string;
  ShiftMI:string;
  ShiftSMT:string;
  Location:string;
  Defect:string;
  Side:string;
  AoiResult:string;
  Platform:string;
  ModelSMT:string;
  OperatorSMT:string;
  Repairer:string;
  Image:[];
  Remark:string;
  Status:string;
  }
  </code></pre>