Image upload using picEdit and symfony - php

Question

I am trying to create a simple form that allows a user to upload a profile picture. To avoid having to deal with too much symfony code, I am using picEdit and I embedded the form directly to the appropriate twig template (which links to both picEdit .css and .js files, and jquery). This form is inside a boostrap modal dialog as seen below:
<div class="modal-dialog">
<div class="modal-content animated fadeIn">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<i class="fa fa-upload modal-icon"></i>
<h4 class="modal-title">Profile picture</h4>
<small>Use the options below to upload and edit your profile picture.</small>
</div>
<div class="modal-body" style="text-align: center">
<form action="upload.php" method="post" id="avatarUploadForm" name="avatarUploadForm" enctype="multipart/form-data">
<input type="file" name="avatarImage" id="avatarImage">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="submit" id="uploadButton" name="uploadButton" class="btn btn-primary">Upload Picture</button>
</form>
</div>
</div>
I also added the following java script function to the template:
<script type="text/javascript">
$(function() {
$('#avatarImage').picEdit();
});
</script>
The form action points to upload.php, shown below (in its simplistic form) and stored in web/upload.php:
<?php
if (isset($_POST['uploadButton'])){
$file = $_FILES['avatarImage']['name'];
move_uploaded_file($file,"/avatars/$file");
}
?>
When I hit the Upload Picture button, I get a success notification as seen below, but the file does not show up in the directory to where it is being sent, and I suspect the upload.php script never really gets triggered. Any suggestions on what I may be doing incorrectly?? *Disclaimer: I'm very new to php/symfony/java script

Answer 1

You are using the wrong key to move. Change upload.php to:
if (isset($_POST['uploadButton'])){
$file = $_FILES['avatarImage']['tmp_name'];
$fileName = $_FILES['avatarImage']['name'];
if(move_uploaded_file($file,"/assets/img/$fileName")){
header('Content-Type','application/json');
echo json_encode(array(
'status' => 'success'
));
}
else{
header('Content-Type','application/json');
echo json_encode(array(
'status' => 'failed'
));
}
}
http://php.net/manual/en/function.move-uploaded-file.php
You should also not rely on the file name of the uploaded file, its a potential for injection. Use some other naming schema or run the name through a scrubber.
Using this particular plugin im also not sure how you plan to tie the image back to the user entity. This plugin seems to only handle upload.
Make sure that you are not getting errors when uploading the file:
$('#image').picEdit({
formSubmitted: function(response){
console.log(response);
}
});
Symfony Approach
Use a form and controller. This will give you access to a lot more and save you a step in updating the users profile image.
We are going to make a few assumptions. First that only the logged in user will be changing their profile. Second that all directories have the proper permissions. And lastly that you are using annotations for routing
//ProfileController
...
/**
* #Route('/upload-profile-image', name="upload_profile_image")
* #Method({"POST"})
*/
public function uploadProfilePictureAction(Request $request)
{
$em = $this->getDoctrine()->getManager();
$user = $em->getRepository('UserBundle:User')->findOneById($this->getUser()->getId());
$form = $this->createFormBuilder($user)
->add('avatarImage','file')
->getForm();
$form->handleRequest($request);
if($form->isValid()){
$user->upload();
$em->flush();
return new JsonResponse(array(
'status'=>'success'
));
}
return new JsonResponse(array(
'status' => 'failed',
'message' => $form->getErrors(true)
));
}
Then make sure that you have your user entity setup with the proper functions described here: http://symfony.com/doc/current/cookbook/doctrine/file_uploads.html
Then just change your form to:
<form action="{{ path('upload_profile_image') }}" ...>