Loading form data from Angular 2 to Slim PHP API
I pulled my hair on this one. Is there a way to parse form data in Slim PHP that puts the data into an array (like JSON). I may have missed something, but all I tried was pushing data out of a single array with no way to target form data. Any help was appreciated.
Angular Component (executed on form submission):
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);
}
Strict 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 form data via Postman, the data is returned, but as a string in an array (I 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 worked until I needed to add the ability to upload an image. I used to collect form input into an object and send it to the API as JSON. His understanding is that since I now need to attach files, I need to submit the view as form data. It's right? THANK!!!
source to share
I faced the same issues in Angular and Slim API and now it works great on the thesis.
1- Don't send any header in request from Angular code
2- For uploaded photos, you will get the upload image in the Slim app In the $ files array This is an example of uploading an image from Angular to the Slim API
In your component.ts
uploadimage(){
var formData = new FormData();
formData.append("image",this.image );
return this.http.post('http://Yourserver.com/UploadeFileAPI',formData)
.map(response =>response.json()).subscribe(
result=>{
console.log("image uploaded");
},
error=>{
console.log(error);
})}
in your Slim application
$app->post('/uploadphoto',function ($req,$res){
$topic_name=$req->getParsedBodyParam('any parm name');
$files=$req->getUploadedFiles();
$newimage=$files['image'];}
source to share
From a subtle point of view, it just sets the processed body to whatever is in$_POST
, so this means that either:
- method not POST
- content type type is not one of
application/x-www-form-urlencoded
ormultipart/form-data
- PHP was unable to parse the sent data into an array
Looking at your code, I think we can exclude the first two, which implies that the data is being sent in a format that PHP does not understand.
It looks like you are trying to send multiple files, so I think maybe you need to change:
memory.append('memory_images', this.memory_images[i], this.memory_images[i].name);
in
memory.append('memory_images[]', this.memory_images[i], this.memory_images[i].name);
(i.e. it is an array and needs []
.)
source to share