title: Symfony2: Uploads a file using Ajax and jQuery
body: <p>I have a Symfony2 application with a form where a file type field. I need to upload an image of a student there, so I helped this documentation: <a href="http://symfony.com/doc/2.3/cookbook/controller/upload_file.html" rel="noreferrer">How to Upload Files</a>  </p>
  
  <p>It is my code: </p>
  
  <p>Controller:</p>
  
  <pre><code>public function createAction(Request $request)
  {        
      if ($request-&gt;isXmlHttpRequest() &amp;&amp; !$request-&gt;isMethod('POST')) {
      throw new HttpException('XMLHttpRequests/AJAX calls must be POSTed');
      }
  
      $entity = new Student();
      $form = $this-&gt;createCreateForm($entity);
      $form-&gt;handleRequest($request);
  
      if ($form-&gt;isValid()) {
         $file = $entity-&gt;getPhoto();
  
         $fileName = md5(uniqid()).'.'.$file-&gt;guessExtension();
  
         $photoDir = $this-&gt;container-&gt;getParameter('kernel.root_dir').'/../web/uploads/images';
  
         $file-&gt;move($photoDir, $fileName);
  
         $entity-&gt;setPhoto($fileName);
  
         $em = $this-&gt;getDoctrine()-&gt;getManager();
         $em-&gt;persist($entity);
         $em-&gt;flush();
  
         if ($request-&gt;isXmlHttpRequest()) {
              return new JsonResponse(array('message' =&gt; 'Success!','success' =&gt; true), 200);
          }
  
          if ($request-&gt;isMethod('POST')) {
          return new JsonResponse(array('message' =&gt; 'Invalid form','success' =&gt; false), 400);
      }
  
        return $this-&gt;redirect($this-&gt;generateUrl('student_show', array('id' =&gt; $entity-&gt;getId())));
      }
      return $this-&gt;render('BackendBundle:Student:new.html.twig', array(
          'entity' =&gt; $entity,
          'form'   =&gt; $form-&gt;createView(),
      ));
  }
  </code></pre>
  
  <p>Entity:</p>
  
  <pre><code>   use Doctrine\ORM\Mapping as ORM;
     use Symfony\Component\Validator\Constraints as Assert;
  
     //...
     /**
     * @var string
     *
     * @ORM\Column(name="photo", type="string", length=255, nullable=true)
     * 
     */
     private $photo;
  
  
     public function setPhoto($photo)
     {
      $this-&gt;photo = $photo;
  
      return $this;
     }
  
     public function getPhoto()
     {
      return $this-&gt;photo;
     }
  </code></pre>
  
  <p>formtype:</p>
  
  <pre><code>   //...
  
     -&gt;add('photo', 'file', array('required' =&gt; false))
  
     //...
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code> //...
  
  $('.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 &amp;&amp; response.responseJSON.message) {
           alert(response.responseJSON.message);
        }
        else{
           alert(desc);
        }
    }
   });
  });
  </code></pre>
  
  <p>The problem I have now is I have to do it with an Ajax request, but do not know how to send that file field and it can be used then in Symfony controller.</p>
  
  <p>I have seen some <code>FormData()</code>, but do not know how it is used.</p>
  
  <p>Could you help me?</p>