Angular 6 formdata

Question

I am using angular 6.I am sending image file data through form data.But I am enable to get file data in API.here is my code

 UpdateLogoprofile(data: any): Observable<any> {
    debugger;
    const model = {};
    const url = AppSettings.API_ENDPOINT + 'Client/UploadFileToStorage';
    console.log(data);
   // const body = JSON.stringify(data);
   //const body = data;
    const httpOptions = {
        headers: new HttpHeaders({
        'content-type': 'application/json',
        'Authorization': 'bearer ' + this.auth_token + ''
           })
         };
    return this.http.post(url, data, httpOptions)
        // .map(this.extractData)
        .map((response: Response) => <any>response.json())
        .catch(this.handleError);
    }

and FormData

 let formData: FormData = new FormData();
                     formData.append(file.name,file);
                    // formData.append('StudentId',this.StudentID);
                    debugger;
                    this._ClientService.UpdateLogoprofile(data).subscribe(
                        image => {

The Problem: I am not able to acces formData in API

Are you seeing your image data in the request that is being sent to your API ? — , Oct 23 '18 at 13:29
You might want to refer to this one : https://stackoverflow.com/questions/47936183/angular-file-upload — Karthik, Oct 23 '18 at 13:32
Content type should be `'content-type': 'multipart/form-data'` as when your form includes any element you should use multipart/form-data and change `this._ClientService.UpdateLogoprofile(data)` to `this._ClientService.UpdateLogoprofile(formData)` — Suryan, Oct 23 '18 at 19:10

score 0 · Answer 1 · edited Jan 03 '20 at 12:28

0

Change the file append line with

formData.append('key', file);

edited Jan 03 '20 at 12:28

sunera pathan

357
1
3
9

answered Oct 23 '18 at 14:50

Hemaidia Hatim

44
3

score 0 · Answer 2 · answered Feb 10 '20 at 09:43

0

Please correct this line

this._ClientService.UpdateLogoprofile(data)

to

this._ClientService.UpdateLogoprofile(formData);

Also in header content type should be 'content-type': 'multipart/form-data'

answered Feb 10 '20 at 09:43

Pinki Dhakad

150
5

Angular 6 formdata

2 Answers2