Angular 4/5 image upload

how can i append image to object and post it which is mutipart formdata

below is service

__________

postFile(id,fileToUpload){
const headers = new HttpHeaders();
headers.append(‘Content-Type’, ‘multipart/form-data’);
  debugger;
return this._http.post(“http://********:8080/****/**/report/addReport/”+id,fileToUpload,{headers:undefined})
}
__________________

import { Component, OnInit } from ‘@angular/core’;
import { Http, Headers,Response } from ‘@angular/http’;
import { ServiceService } from ‘…/service.service’;
@Component({
selector: ‘app-reportissue’,
templateUrl: ‘./reportissue.component.html’,
styleUrls: [’./reportissue.component.css’]
})
export class ReportissueComponent implements OnInit {
report={}
// report={
// “vehicleNum”:this.report.vehicleNum,
// “offenceCategory”:this.report.offenceCategory,
// “vehicleType”:this.report.vehicleType,
// “location”:this.report.location,
// “description”:this.report.description
// }
formData={}
constructor(private http: Http,private fileUploadService: ServiceService) { }

ngOnInit() {
}

fileToUpload: File = null;
handleFileInput(files: FileList) {
this.fileToUpload = files.item(0);
//this.append = this.report;

}

reportissue(report) {
debugger;

var uid = localStorage.getItem(‘userid’);
//this.report1 = this.report;
//var formData = new FormData();
var formData = new FormData();
formData.append(‘img1’, this.fileToUpload, this.fileToUpload.name);
//formData.append(‘report1’,this.report);
//formData.append(‘fileKey’, this.fileToUpload, this.fileToUpload.name);
formData.append(‘vehicleNum’,report.vehicleNum);
formData.append(‘offenceCategory’,report.offenceCategory);
formData.append(‘vehicleType’,report.vehicleType);
formData.append(‘location’,report.location);
formData.append(‘description’,report.description);

this.fileUploadService.postFile(uid,formData).subscribe(data => {
// do something, if upload success
}, error => {
console.log(error);
});
}

1 Like

Hi @sra-one,

This post was moved to a different board that fits your topic of discussion a bit better. This means you’ll get better engagement on your post, and it keeps our Community organized so users can more easily find information.

As you’ll notice, your Topic is now in the Project Development Help and Advice board. No action is needed on your part; you can continue the conversation as normal here.

Cheers!

1 Like

Thank you Naddia,

I will appreciate any help given from your side