How can I upload a file along with other data?

Question

Angular

I have a form where the photo code below is selected:

<button mat-button type="button" (click)="imgFileInput.click()">Add a photo</button>
      <input hidden formControlName="img" #imgFileInput type="file" name="img" (change)="onFileChanged($event)" [value]="selectedFile"/>

and there is a form handler:

postForm: FormGroup;

constructor(private fb: FormBuilder) {
this.postForm = fb.group({
      'title': [null, Validators.required],
      'content': [null, Validators.compose([Validators.required, Validators.minLength(30)])],
      'category': [null, Validators.required],
      'img': ''
    });
}

onFormSubmit() {
    this._post.savePost(this.postForm);
  }

And on the server function:

router.post('/', upload.single('img'), async (req, res) => {
    console.log(req.file);
    console.log(req.body);
}

So, req.body displays okay, but req.file displays undefiend, why can this be so? maybe I'm not uploading the file correctly?

Answer 1

Here it is loaded via FileReader
https://medium.com/@amcdnl/file-uploads-with-angul...

Answer 2

In HTML, in the form tag, you need to set the attribute enctype = "multipart/form-data"