Angular 7 form submitting won't work with files

Question

I have a form and I want to submit files too. I tried my API in postman and it works. But when I try to do it in angular I just couldn't find a way to make it work.

I tried many ways to do it but couldn't make it work

I created a User model:

export class User {
   public title: string;
   public name: string;
   public age: string;
   public userFile: any;
}

In the user component user.component.ts I declared a user model variable and a method on submit :

model = new User();//user model object

In the submit method I did set the content type to '' and submitted the data.

submit(){
    console.log(this.model);
    const headers = new HttpHeaders().set('Content-Type', '');
    this.http.post('.../users/create', this.model, {headers}).subscribe(res => {
         console.log("successs " + data);
   },
   err => {
         console.log("error" + err)
  });
}

And the HTML:

  <form (submit)="submit()">
    <div class="form-group">
      <label for="title">UserId</label>
      <input type="text" class="form-control" id="title" required [(ngModel)]="model.title" name="title">
    </div>
    <div class="form-group">
      <label for="author">User Name</label>
      <input type="text" class="form-control" id="author" required [(ngModel)]="model.name" name="author">
    </div>
    <div class="form-group">
      <input type="file" id="userFile" #userFile="ngModel" [(ngModel)]="model.userFile">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
   </form>

When I submit the form I get the error:

422 Unprocessable Entity

In the inspect element I see that body request was:

{
    "title": "lorem",
    "name": "Test",
    "age": "35",
    "userFile": "C:\\fakepath\\testimage.png"
}

Can someone help me, please?

score 0 · Answer 1 · answered Jul 06 '19 at 17:59

0

You have to pass the file as a part of FormData. Please see the answer here Angular File Upload

answered Jul 06 '19 at 17:59

Sachin Gupta

4,981
3
16
32

I just tried that but I get the same error and also in the request payload I get this------WebKitFormBoundary47l76pSzkdTJSrB3 Content-Disposition: form-data; name="files"; filename="producttestss.png" Content-Type: image/png ------WebKitFormBoundary47l76pSzkdTJSrB3 Content-Disposition: form-data; name="name" Can you help me please – kfxoy50h.ajq Jul 06 '19 at 18:17

score 0 · Answer 2 · answered Jul 07 '19 at 09:46

0

Make sure you change your code like this. When using FormData you have to submit everything in FormData format

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'multipart/form-data',
    'Authorization': 'my-auth-token'
  })
};

const formData = new FormData();
formData.append("userFile", userFile);
formData.append("title", title);
formData.append("name", name);
formData.append("age", age);

return this.http.post(url, formData, headers);

answered Jul 07 '19 at 09:46

Tony Ngo

19,166
4
38
60

and how to get the file field? I tried `handleFileInput(files: FileList) { this.fileToUpload = files.item(0); }` and then to append to the form but still geting the same issue :( – kfxoy50h.ajq Jul 07 '19 at 10:38

Angular 7 form submitting won't work with files

2 Answers2