Angular File Upload to Laravel

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.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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();


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x