How to submit form and file data in the same view using Angular 4 in .NET Core

Question

I am trying to add a new record to the suppliers table. This table also has another associated with it, which stores contracts with each supplier. The desired functionality is to present in the same form both the data for the new Supplier and the contract, but I can not get it to work.

I can add a new provider after the contract, uploading the file separately in a different form, but not in the same submit action.

How can i do this?

My form is as follows:

<form class="form-material m-t-40" enctype="multipart/form-data">

    <div class="form-group has-warning">
        <h4 class="entity-info"><label for="denumire" class="label-has-danger"> Denumire furnizor </label></h4>
        <input type="text" id="denumire" name="denumire" class="form-control" placeholder="Denumire" [(ngModel)]="furnizor.denumire" #denumire="ngModel">
    </div>
    <div class="form-group has-warning">
        <h4 class="entity-info"><label for="cod" class="label-has-danger"> Cod intern furnizor </label></h4>
        <input type="text" id="cod" name="cod" class="form-control" placeholder="Cod intern" [(ngModel)]="furnizor.cod" #cod="ngModel">
    </div>
    <div class="form-group has-warning">
        <h4 class="entity-info"><label for="cod" class="label-has-success"> Cod de inregistrare fiscala furnizor </label></h4>
        <input type="text" id="codIntern" name="codIntern" class="form-control" placeholder="Cod" [(ngModel)]="furnizor.codIntern" #codIntern="ngModel">
    </div>
    <div class="form-group has-warning">
        <h4 class="entity-info"><label for="adresa" class="label-has-success"> Adresa </label></h4>
        <input type="text" id="adresa" name="adresa" class="form-control" placeholder="Adresa" [(ngModel)]="furnizor.adresa">
    </div>
    <div class="form-group has-warning">
        <h4 class="entity-info"><label for="persoanaContact" class="label-has-success"> Persoana Contact </label></h4>
        <input type="text" id="persoanaContact" name="persoanaContact" class="form-control" placeholder="Persoana Contact" [(ngModel)]="furnizor.persoanaContact" #reprezentant="ngModel">
    </div>
    <div class="form-group has-warning">
        <h4 class="entity-info"><label for="telefon" class="label-has-success"> Telefon </label></h4>
        <input type="tel" id="telefon" name="telefon" class="form-control" placeholder="Telefon" [(ngModel)]="furnizor.telefon" #telefon="ngModel">
    </div>
    <div class="form-group has-warning">
        <h4 class="entity-info"><label for="dataIncepereContract" class="label-has-success"> Data incepere contract </label></h4>
        <input type="date" class="form-control m-b-40" placeholder="2017-06-04" id="dataIncepereContract" name="dataIncepereContract" [(ngModel)]="furnizor.dataIncepereContract" #dataIncepereContract="ngModel">
    </div>

    <div class="form-group has-warning">
        <h4 class="entity-info"><label for="dataExpirareContract" class="label-has-success"> Data expirare contract </label></h4>
        <input type="date" class="form-control m-b-40" placeholder="2017-06-04" id="dataExpirareContract" name="dataExpirareContract" [(ngModel)]="furnizor.dataExpirareContract" #dataExpirareContract="ngModel">
    </div>

    <input type="file" #fileInput>

    <button type="button" class="btn btn-md btn-add animated flipInX flipInY lightSpeedIn slideInUp" (click)="submit()">
        <i class="fa fa-floppy-o"></i> Save
    </button>
</form>

I tried many options and combinations for the file and other form fields, but no one works.

My ts file reads the input file as follows:

...

@ViewChild('fileInput') fileInput: ElementRef;

...
submit() {
   var nativeElement: HTMLInputElement = this.fileInput.nativeElement;

   if (nativeElement.files) this.file = nativeElement.files[0];
   this.furnizorService.create(this.furnizor, this.file).subscribe(() => {});
}

My service:

create(furnizor: any, fileToUpload: any) {

    let input = new FormData();
    input.append("file", fileToUpload);

    furnizor.file = input;

    return this.http.post('/api/furnizor', furnizor).map(res => res.json());
}

And in my C # controller, I tried:

[HttpPost("/api/furnizor")]
    public async Task<IActionResult> CreateFurnizor([FromBody]FurnizorResource furnizorResource)
    {
    ...
    }

Where I added a new property

public IFormFile file { get; set; }

FurnizorResource, , furnizorResource null.

( ):

[HttpPost("/api/furnizor")]
public async Task<IActionResult> CreateFurnizor([FromBody]FurnizorResource furnizorResource, IFormFile file)
{
...
}

( , Angular 2 ). furnizorResource , , , null...

Json Angular 4.3.6 ASP.NET Core 2?

Answer 1

- ? , , .

var formData = new FormData()
for (var key in model)
    formData.append(key, furnizor[key])

formData.append('file', fileToUpload)

let headers = new Headers({ 'Content-Type': 'multipart/form-data' })
let options = new RequestOptions({ headers: headers })
return this.authHttp.post('/api/furnizor', formData, options).map(res => res.json())

Answer 2

, , Angular # fornitureResources, FornitureResource

interface Forniture
{
    cod:number;
    ...
    fornitureResources :IFromFile[]
 }

, ,

let myforniture={
     cod:1,
     ...
     fornitureResources:[
         { file:"file1"},
         { file:"file2"}
     ]
  }

"myforniture" this.http.post('/api/furnizor', myforniture), "Forniture" API