File upload from Angular - Set file content to Dto - aspnetboilerplate

Question

I added a IOperationFilter to swagger so that I can test file uploads for my apis from swagger ui. My Dto is like;
public class ResourceCreateDto : EntityDto
{
public string Title { get; set; }
public string Description { get; set; }
public IFormFile File { get; set; } //file content here
public string ExtendedData { get; set; }
}
Asp.net Core API is:
public async Task<ResourceDto> Create([FromForm] ResourceCreateDto input)
This way I can upload file & other data at the same time (Some have suggested to save file 1st and then save data in another call).
What I am not sure is how to use it in Angular end with Abp. Even though proxies are generated how can I get the angular client to use [File] property and post it's data with the rest to server api?

Answer 1

create DTO:
export class ResourceCreateDto{
title : String;
description: String;
extendedData : String;
file: File;
}
in html
<input class="form-control" type="text" [(ngModel)]="resourceCreateDto.title"/>
<input class="form-control" type="text" [(ngModel)]="resourceCreateDto.description"/>
<input class="form-control" type="file" [(ngModel)]="resourceCreateDto.extendedData"/>
<input class="form-control" type="text" [(ngModel)]="resourceCreateDto.file" (change)="onChangeFile($event)"/>
<button class="btn btn-primary" type="button" (click)="submit()"> Add new </button>
in component
resourceCreateDto: ResourceCreateDto;
file: any;
ngOnInit(): void {
//..
resourceCreateDto = new ResourceCreateDto();
}
onChangeFile(event){
this.file = event.srcElement.files;
}
submit(){
let formData: FormData = new FormData();
formData.append('title', this.resourceCreateDto.title + '');
formData.append('description', this.resourceCreateDto.description + '');
formData.append('extendedData', this.resourceCreateDto.extendedData + '');
formData.append('file', this.file[0], this.file[0].name);
// use service call api
// declare your httpClient
this.httpClient.post<httpResponse>(`${this.BASEURL}/...`, formData,
this.getHttpFileOptions(your token))
.subscribe(response =>{
console.log(response);
},
error=>{
console.log(error);
})
}
setting option http
getHttpFileOptions(token: String): object{
return {
observe: 'response',
responseType: 'json',
headers: new HttpHeaders({
"Accept": "application/json",
'Authorization': 'Bearer ' + token
})
};
}
action in server
[HttpPost("Create")]
public IActionResult Create([FromForm]ResourceCreateDto model, IFormFile File)
Hope to help you!