Request is empty when POST from Angular with FormData in LUMEN

Question

I'm trying to upload a file to a LUMEN backend.

Headers sent to backend are:

Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8
Authorization: Bearer 
Cache-Control: no-cache
Connection: keep-alive
Content-Length: 1034
Content-Type: multipart/form-data
Host: localhost:8000
Origin: http://evil.com/
Pragma: no-cache
Referer: http://localhost:4200/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36

The payload is a formData with a file appended to it:

------WebKitFormBoundaryBh1H2ML8XFieaS2c
Content-Disposition: form-data; name="file[]"; filename="exportSales.csv"
Content-Type: text/csv


------WebKitFormBoundaryBh1H2ML8XFieaS2c--

The frontend method that uploads the file is:

store(file): Observable<{}> {

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

  return this.http.post(this.settings.api.uploadFile, formData, {headers: { 'Content-Type': 'multipart/form-data'} })
                   .catch((error:any) => Observable.throw(error || 'Server error'));
}

But the request is empty all the time:

$router->group(['prefix' => 'v1'], function () use ($router) {
  $router->post('/upload', function (Request $request) use ($router) {
    dd($request->all());
  });
});

Answer 1

try to use file.file in

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

or send me the response of console.log(file);