Angular File Upload to Laravel

Question

I am trying to upload a file to a Laravel 5.5 API backend using Angular 5.

The following upload code works (I have included JQuery library for use with bootstrap):

$.ajax({
    url: url,
    data: formModel,
    type: 'POST',
    contentType: false, // NEEDED, DON'T OMIT THIS
    processData: false, // NEEDED, DON'T OMIT THIS
    // ... Other options like success and etc
});

However it does not feel like the "Angular" way to do this. Using imports -- import { HttpClientModule, HttpClient, HttpHeaders } from '@angular/common/http'; and the following code, the server gets blank entries for the post data. The post data is present in the request body like a regular form but it is not accessible from $_POST or laravel's $request parameter.

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/form-data' })
};
// In a real-world app you'd have a http request / service call here like
// this.http.post('apiUrl', formModel)
const url = this.configService.getAPIUrl() + 'videos'; //http://192.168.1.106/backend/hero';

let ret =  this.http.post(url, formModel, httpOptions).pipe(
  //tap((hero: T) => this.log(`posted {data}`)),
  catchError(this.heroService.handleError('addHero'))
).subscribe();

I am just looking to find out what is wrong with my angular code and how I can fix that. Thanks for any suggestions and responses.

Answer 1

You just need to set proper headers and formdata to your http service like this Please do not pass any content-type via headers. I don't know what are you doing with pipe and all those but passing parameters like this should work

const url = this.configService.getAPIUrl() + 'videos'; 

let formModel = new FormData();
//Then add your data using formModel.append() method
//like formModel.append("username","ABC");

let ret =  this.http.post(url, formModel).pipe(
  //tap((hero: T) => this.log(`posted {data}`)),
  catchError(this.heroService.handleError('addHero'))
).subscribe();