How to use POST method to send form-data in Angular?

Question

I have backend API which accepts a POST method with an image form-data, like this,

When using Postman like above, everything works well. But when I want to do this in Angular, it does not work.

<!-- html template file -->
<input type="file" (change)="handleInputEvent($event)"/>

import {Component, OnInit} from '@angular/core';
import {MyDearFishService} from '../../my-dear-fish.service';

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.scss']
})
export class UploadComponent implements OnInit {

  constructor(public service: MyDearFishService) {
  }

  ngOnInit() {
  }

  arrayOne(n: number): any[] {
    return Array(n);
  }

  handleInputEvent($event) {

    const image = $event.target.files[0];
    this.service.recognizeFish(image);
  }

}

// My service file (using HttpClient):
const rootUrl = 'https://...../api';

public recognizeFish(image: File): Promise<any> {
  return new Promise((resolve, reject) => {

    const formData = new FormData();
    formData.append('image', image);

    this.post('/image/identification', formData)
      .toPromise()
      .then(res => {
        if (res['code'] === 0) {
          console.log('=====================================');
          console.log('Recognition failed, cause = ', res);
          console.log('=====================================');
        } else {
          console.log('=====================================');
          console.log('Recognition succeeded, res = ', res);
          console.log('=====================================');
        }
        resolve();
      })
      .catch(cause => {
        console.log('=====================================');
        console.log('Recognition failed, cause = ', cause);
        console.log('=====================================');
        reject();
      });
    ;
  });
}

private getOptions(headers?: HttpHeaders, params?): HttpHeaders {
  if (!headers) {
    headers = new HttpHeaders().append('Content-Type', 'application/x-www-form-urlencoded');
  }
  return headers;
}

post(route: string, body: any, headers?: HttpHeaders): Observable<any> {
  headers = this.getOptions(headers);
  return this.http.post(rootUrl + route, body, {headers});
}

The backend developer (who developed the back-end using Flask) give me this code:

@main.route("/image/identification", methods=['POST'])
@login_required
def identification():
    image_file = request.files.get('image', default=None)
    if image_file:
        picture_fn = save_picture(image_file, 2)
        return identif(picture_fn)
    else:
        return jsonify({'code':0, 'message':'image file error!'})

And he also told me that when the "code" property in the response is 0, it means error, when it is 1, it means no error. When I test my Angular app in the browser, I've got this error:

Nimantha · Accepted Answer · 2021-11-14 08:10:16Z

6

When I upload some image using angular, I do this:

public uploadImage (img: File): Observable<any> {
    const form = new FormData;

    form.append('image', img);

    return this.http.post(`${URL_API}/api/imagem/upload`, form);

  }

and it works fine. So, I think the problem in your code is that you're not passing the formData to your post method here:

this.post('/image/identification', {files: {image: image}})
        .toPromise()....

edited Nov 14, 2021 at 8:10

Nimantha

6,5276 gold badges32 silver badges78 bronze badges

answered Feb 14, 2019 at 15:36

André Pacheco

1,89517 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Bohao LI Over a year ago

In fact even when I passed formData as second parameter to the method it doesn't work either.

André Pacheco Over a year ago

Don't pass the headers, just the url and the formData to http. It should solve your problem

André Pacheco Over a year ago

Don't pass the headers, just the url and the formData to http. It should solve your problem

Bohao LI Over a year ago

I don't really know why, but this did solve my problem! Thanks so much.

Sanjay Sahani Over a year ago

@AndréPacheco what to do if I have an image as well as some other key value.

Tiago Silva · Accepted Answer · 2019-02-14 15:32:37Z

1

You are sending the data in the correct paremeter of the post request ( body ) but the problem is that your object is not getting parsed as the correct format ( in this case 'FormData' ) for that you need to declare a new instance of FormData and append the image inside.

 handleInputEvent($event) {
     const image = $event.target.files[0];
     const formData = new FormData();
     formData.append('image', image );
     this.service.recognizeFish(formData);
}

answered Feb 14, 2019 at 15:32

Tiago Silva

2,34917 silver badges20 bronze badges

1 Comment

Tiago Silva Over a year ago

It returns an HTTP request error or your request doesn't even execute? If doesn't execute just add to this.service.recognizeFish(formData).subscribe();

Sudarshana Dayananda · Accepted Answer · 2019-02-14 15:35:44Z

0

Pass FormData directly to your post method.

  public recognizeFish(image: File): Promise<any> {
    return new Promise((resolve, reject) => {

      let formData = new FormData();
      formData.append('image', image);

      this.post('/image/identification', formData)
        .toPromise()
        .then(res => {
          console.log('Recognition okay, res = ', res);
          resolve();
        })
        .catch(cause => {
          console.log('Recognition failed, cause = ', cause);
          reject();
        });
    });
  }

answered Feb 14, 2019 at 15:35

Sudarshana Dayananda

5,2652 gold badges27 silver badges45 bronze badges

Collectives™ on Stack Overflow

How to use POST method to send form-data in Angular?

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related