title: Pass an image through AJAX
body: <p>Basically I want to pass a image file with ajax on submitting a form and retrieve the image and send it by email as an attachment file:</p>
  
  <p>Here's the <strong>form</strong> :</p>
  
  <pre><code>&lt;form role="form" action="" name="devis" id="devis" method="post" enctype="multipart/form-data" class="form-horizontal"&gt;
      &lt;fieldset&gt;
          &lt;div class="form-group"&gt;
              &lt;label class="control-label col-md-4" for="societe"&gt;Company&lt;/label&gt;
              &lt;div class="col-md-8"&gt;
                  &lt;input type="text" class="form-control input-md col-md-8" name="societe" value="" maxlength="" id="societe"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label class="control-label col-md-4" for="message"&gt;&lt;span class="required"&gt;* &lt;/span&gt;Message&lt;/label&gt;
              &lt;div class="col-md-8"&gt;
                  &lt;textarea rows="5" name="message" class="form-control input-md col-md-8" maxlength="" required="" style="resize:none;" id="message"&gt;&lt;/textarea&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group" id="input_file"&gt;
              &lt;label class="control-label col-md-4" for="image_input_field"&gt;Logo&lt;/label&gt;
              &lt;div class="col-md-8"&gt;
              &lt;div class="input-group uploaddiv"&gt;
                  &lt;span class="input-group-btn"&gt;
                      &lt;span class="btn btn-default btn-file"&gt;
                          Parcourir &lt;input type="file" id="image_input_field" name="file"&gt;
                      &lt;/span&gt;
                  &lt;/span&gt;
                  &lt;input type="text" class="form-control" readonly=""&gt;
              &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;div class="form-group"&gt;
      &lt;div class="form-actions col-md-9 col-md-offset-3 text-right"&gt;
          &lt;input type="submit" value="Envoyer" name="" class="btn btn-primary" id="submit"&gt;
          &lt;input type="reset" value="Annuler" name="" class="btn btn-default" id="reset"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I can't seem to find what's the error in my code ! Here's the <strong>AJAX call</strong> :</p>
  
  <pre><code>jQuery(document).on("click", "#submit", function(e) {
        e.preventDefault();
        var fileInput = document.getElementById('image_input_field');
        var file = fileInput.files[0];
        var formData = new FormData();
        formData.append('file', file);
        // console.log(file);
  
        var societe = $("input#societe").val();
        var message = $("textarea#message").val();
        jQuery.ajax({
          url: "ajax.php",
          type: "post",
          data: {
             'file': file,
             'module' : 'ajax_data_form',
             'societe': societe,
             'message': message
          },
          cache: false,
  
          success: function(reponse) {
            if(reponse) {
              alert(reponse);
              // console.log(reponse);
              // jQuery('#devis').trigger("reset");
            } else {
              alert('Erreur');
            }
          }
        });
       });
  </code></pre>
  
  <p>And here's the <strong>ajax.php</strong>:</p>
  
  <pre><code>&lt;?php
  if( isset($_POST['module']) &amp;&amp; $_POST['module'] == "ajax_data_form" )
  {
       var_dump($_FILES);
  }
  </code></pre>