Uploading form data from Angular 2 to Slim PHP API

Viewed 1423

Im pulling my hair out on this one. Is there any way to parse form-data in Slim PHP that puts the data into an array (as you would JSON). I might be missing something but everything I have tried has kicked the data out in one array with no way of targeting the form data. Any help appreciated.

Angular Component (executes on form submit):

let memory: any = new FormData();

if (this.memory_images) {
  for(var i = 0; i < this.memory_images.length; i++) {
    memory.append('memory_images', this.memory_images[i], this.memory_images[i].name);
  }
}
memory.append('memory_song', this.memory_song);
memory.append('memory_text', this.memory_text);
memory.append('memory_author', this.memory_author);
memory.append('memory_collection', this.memory_collection);

this.memoriesService.saveMemory(memory).subscribe(data => {
  console.log(data);
  // returns empty array
});

Angular memoriesService:

saveMemory(memory){
  let headers = new Headers();
  headers.append('Content-Type','multipart/form-data');
  return this.http.post('http://{{ my api route }}/api/v1/memories', memory, {headers: headers})
  .map(res => res);
}

Slim API Route:

$app->group(APIV1 . '/memories', function() {
  $this->post('', function (Request $request, Response $response, $args) {
    var_dump($request->getParsedBody());
    return $response
  });
});

The component always returns an empty array. Interestingly, when submitting the form data via Postman the data is returned but as a string in an array (I've only sent two parameters):

array(1) {
  ["------WebKitFormBoundaryXcRTrBhJge4N7IE2
  Content-Disposition:_form-data;_name"]=>
    string(181) ""memory_author"

    Jack
    ------WebKitFormBoundaryXcRTrBhJge4N7IE2
    Content-Disposition: form-data; name="memory_collection"

    12345678
    ------WebKitFormBoundaryXcRTrBhJge4N7IE2--
   "
}

The form was working until I needed to add the ability to upload an image. Before, I collected the form inputs into an object and sent to the API as JSON. Its my understanding that because I now need to attach files, I need to send the submission as form-data. Is this correct? THANK YOU!!!

2 Answers
Related