Activité-Paranormale

Ce tutoriel présente une technique afin d'uploader un fichier dans un formulaire directement en Ajax, c'est-à-dire sans rechargement de page, et en utilisant XMLHTTPRequest 2.

Soit le formulaire suivant possédant un input de type « file », un autre de type « text » et enfin un « textarea ». Nous souhaitons envoyer, du côté serveur, l’ensemble des données de ce formulaire à l’aide d’Ajax :

<form id="listedit_form_attachment" action="/app.php/attachment/createTo/111" method="post" enctype="multipart/form-data" >
  <input type="file" id="attachment_fileTempAttachment" name="attachment[fileTempAttachment]" value="" />
  <input type="text" id="attachment_titleAttachment" name="attachment[titleAttachment]" value="" />
  <textarea id="attachment_commentAttachment" name="attachment[commentAttachment]" class="no-horizontal"></textarea>
  <input type="hidden" id="attachment__token" name="attachment[_token]" value="d2ccaa122678bb5d11955691c2293186ced68253" />
  <input type="submit" value="Envoi de fichier" id="listedit_submit" />
</form>

Le code JQuery :

$("#listedit_form_attachment").submit(function()
{
  var fileInput = document.getElementById('attachment_fileAttachment');
  var file = fileInput.files[0];
  var formData = new FormData();
  formData.append('file', file);
  formData.append('attachment[titleAttachment]',$('#attachment_titleAttachment').val());
  formData.append('attachment[commentAttachment]', $('#attachment_commentAttachment').val());
  formData.append('attachment[fileAttachment]', 'file');
  formData.append('attachment[_token]', $('#attachment__token').val());

  $.ajax({
    type: "POST",
    url: "{{ path('Upload_File', { 'toId' : fatherEntity.id }) }}",
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    async: false,
    beforeSend: function () { $("#divLoading").show(); },
    complete: function () { $("#divLoading").fadeOut(); },
    success: function(data){
      $('#listedit_form_div_{{ divA }}').html(data);
    }
  });

  return false;
});

Remarque :

Les données seront envoyées, du côté serveur, grâce à « FormData ». La méthode « append » va setter les valeurs dans le « formdata ». Dans l’Ajax les variables « cache », « contentType », « processData » et « async » doivent être mises à « false ».

Du côté serveur (Symfony2) :

1/ On utilise exactement les mêmes méthodes que pour un formulaire soumis plus classiquement :

$em = $this->getDoctrine()->getEntityManager();

$attachment = new Attachment();
$attachmentForm = $this->createForm(new AttachmentForm(), $attachment);
$request = $this->getRequest();

$attachmentForm->bindRequest($request);

2/ Pour récupérer les données relatives au fichier, on utilisera :

$file = $request->files->get('file');

// Récupérer les erreurs
$file->getError();

// Récupérer son nom original
$file->getClientOriginalName();

// L’enregistrer dans un dossier
$file->move("attachments/", $file->getClientOriginalName());