I have to upload with a Post a file, but I never have did it. I try this way, in debug I can see the FormBuilder getting the value of the upload, but I don't know if this way it's correct. I search in many documents, but I can't get it. I want to do this with a FormGroup, but just sending the file and the values for URL it's good for me.
edit-student.component.html
<form [formGroup]="billsForm" (ngSubmit)="onSubmit()">
<br>
<mat-accordion>
<mat-expansion-panel hideToggle *ngFor="let month of months">
<mat-expansion-panel-header>
<mat-panel-title>
<select class="selectMonth" formControlName="month">
<option *ngFor="let month of months" [value]="month.value">
{{month.viewValue}}
</option>
</select>
</mat-panel-title>
<mat-panel-description>
Boleto do mês de {{month.viewValue}}
</mat-panel-description>
</mat-expansion-panel-header>
<input formControlName="upload" id="uploadB" class="uploadBoleto" type="file"
accept="application/pdf"><br>
<input class="uploadBoleto" type="submit" value="Enviar">
</mat-expansion-panel>
</mat-accordion>
</form>
edit-student.component.ts
ngOnInit(): void {
this.billsForm = this.fbills.group({
_id: [this.student.datakey._id],
course: [this.student.datakey.course],
sYear: [this.student.datakey.sYear],
month: [],
upload: [],
})
}
onSubmit() {
debugger
return this.editService.upload(this.billsForm.value).then((result:any)=>{
console.log('sucess')
}).catch((error:any)=>{
console.log(error)
});
}
edit-student.service.ts
upload(bill:BillsModel) {
debugger
let headerGet = new HttpHeaders();
let formData = new FormData();
let key = String(bill._id);
formData.append(key, bill.upload);
headerGet = headerGet.append('enctype', 'multipart/form-data');
headerGet = headerGet.append('key', this.user.token);
const requestOptions = {
headers: headerGet,
};
return new Promise ((resolve, reject)=>{
const url = this.config.API_URL + '/bills/create/' + bill.course + '/' + bill.sYear + '/' + bill.month + '/' + bill._id;
console.log(url);
this.http.post<any>( url, formData, requestOptions).subscribe((result:any)=>{
resolve(result);
}, (error)=>{
reject(error)
})
})
}
bills.model.ts
export class BillsModel{
_id: number;
sYear: number;
month: number;
status: string;
course: string;
upload: any;
}
This is an example of how to upload a file with angular service:
public uploadFile(body: any, id: string): Observable<any>{
const formData = new FormData();
formData.append('file', body);
return this.httpClient.post<any>(config.serviceBaseUrl + '/file/save/'+id, formData,);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.