How to post Form data and File in the same submit with Angular 4 in .NET Core

Question

I am trying to add in the Suppliers table a new entry. This table also has another one linked to it in which are stored the contracts with each supplier. The desired functionality is to submit in the same form both the data for the new Supplier and the contract, but I can't make it work.

I am able to add a new supplier and after the contract by uploading the file separately in another form, but not in the same submit action.

How can I do that?

My form looks like this:

<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 have tried a lot of options and combinations for the file and the other form fields, but none work.

My ts file reads the file input like this:

...

@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; }

in FurnizorResource, but if I do this, furnizorResource is not mapped and is null.

I also tried sending them separately (just to try):

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

(Which obviously doesn't work since in the Angular service I can't send 2 "body" elements). With this method the furnizorResource data is correct, but of course file is null...

How can I post Json data and a file at the same time in Angular 4.3.6 and ASP.NET Core 2?

Answer 1

Have you tried something like that? That's teh way I use it in my app and it works.

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())