[SOLUCIONADO] Subir Imagen(archivo) con Ajax Jquery y usarlo en Symfony2

[JMMS]

Buenas, necesito poder mandar varios campos de un formulario incluido uno de tipo "file" por ajax para luego poder guardar los datos en la base de datos con Symfony2. Lo hice sin petición ajax siguiendo esta documentación:"http://symfony.com/doc/2.3/cookbook/controller/upload_file.html" y se guarda correctamente todo, pero a la hora de querer hacerlo por ajax tengo problema con el campo "file" y por más que busco en la web sólo se habla de FormData, pero no sé usarlo ni mandarlo junto con mis otros datos y tampoco sé cómo usarlo luego en el controlador para que funcione mi código.

El código que uso es el siguiente:

Controlador:

Código PHP:

     public function createAction(Request $request)
    {        
        if ($request->isXmlHttpRequest() && !$request->isMethod('POST')) {
        throw new HttpException('XMLHttpRequests/AJAX calls must be POSTed');
        }
        
        $entity = new Student();
        $form = $this->createCreateForm($entity);
        $form->handleRequest($request);

        if ($form->isValid()) {
           $file = $entity->getPhoto();

           $fileName = md5(uniqid()).'.'.$file->guessExtension();

           $photoDir = $this->container->getParameter('kernel.root_dir').'/../web/uploads/images';

           $file->move($photoDir, $fileName);

           $entity->setPhoto($fileName);

           $em = $this->getDoctrine()->getManager();
           $em->persist($entity);
           $em->flush();

           if ($request->isXmlHttpRequest()) {
                return new JsonResponse(array('message' => 'Success!','success' => true), 200);
            }

            if ($request->isMethod('POST')) {
            return new JsonResponse(array('message' => 'Invalid form','success' => false), 400);
        }
   
          return $this->redirect($this->generateUrl('student_show', array('id' => $entity->getId())));
        }
        return $this->render('BackendBundle:Student:new.html.twig', array(
            'entity' => $entity,
            'form'   => $form->createView(),
        ));
    } 
   

Entidad:

Código PHP:

       use DoctrineORMMapping as ORM;
       use SymfonyComponentValidatorConstraints as Assert;

       //...
       /**
       * @var string
       *
       * @ORM\Column(name="photo", type="string", length=255, nullable=true)
       * @Assert\File(mimeTypes={ "image/png","image/jpg" })
       */
       private $photo;

  
       public function setPhoto($photo)
       {
        $this->photo = $photo;

        return $this;
       }
    
       public function getPhoto()
       {
        return $this->photo;
       } 
   

Formtype:

Código PHP:

      //...
       
       ->add('photo', 'file', array('required' => false))
      
       //... 
   

Javascript:

Código PHP:

    //...

    $('.form_student').on("submit",function(event) {
     event.preventDefault();

     $.ajax({
      type: 'POST',
      url: Routing.generate('student_create'),
      data: $(this).serialize(),
      dataType: 'json',
     
      success: function(response) {

       alert(response.message);
      },
      error: function (response, desc, err){
          if (response.responseJSON && response.responseJSON.message) {
             alert(response.responseJSON.message);
          }
          else{
             alert(desc);
          }
      }
     });
    }); 
   

[JMMS]

Lo acabo de solucionar con estos cambios:

-

Código PHP:

  data: new FormData($(this)[0]) 
   

en lugar de

Código PHP:

  data: $ (this).serialize() 
   

Y añadiendo en la petición ajax:

Código PHP:

   processData: false,
      contentType: false,
      cache: false, 
   

[cluster28]

Llevo más de dos horas con esto y en el request no aparece el formulario.

Código TWIG:

<div id="add-file">
    <form id="form-file" action="{{ path('panel_archivos_add') }}" enctype="multipart/form-data" method="post">
        <input id="fileupload" type="file" name="fichero"/>
        <input type="hidden" name="subcarpeta" value=""/>
        <input type="hidden" name="id_usuario" value=""/>
        <input type="submit"></input>
    </form>
</div>
    
<script>
    
      $('#form-file').submit(function(event){
            
            event.preventDefault();
 
            $.ajax({
 
                    error:      function(jqXHR, textStatus, errorThrown){},
                    data:       {
                                    datos: new FormData($(this)[0])
                                },
                    success:    function(data, textStatus, jqXHR)
                                {
                                    console.log(data);
                                },
                    url:        "{{ path('panel_archivos_add') }}",
                    method:     "POST",
                    processData: false,
                    contentType: false,
                    cache: false
                }
            );
        });
 
</script>
 

Si pongo esto, tampoco...

Código TWIG:

contentType: "multipart/form-data"