title: phpmailer & ajax : file attachment with the mail
body: <p>I have a working contact form so a user can email me while not having to refresh the page, using ajax.  </p>
  
  <p>I'd like my user to have the option to attach a file with his email, but I'm kind of lost as how to process the data with Ajax.  </p>
  
  <p>Here is the contact form :  </p>
  
  <pre><code>&lt;form id="contact-form" method="post" action="/handler.php?ajax=contact"&gt;
  
      &lt;input type="email" name="contact-email" id="contact-email" /&gt;
  
      &lt;select name="contact-category" id="contact-category"&gt;
          &lt;option value="1"&gt;1&lt;/option&gt;
          &lt;option value="2"&gt;2&lt;/option&gt;
          &lt;option value="3"&gt;3&lt;/option&gt;
      &lt;/select&gt;
  
      &lt;input type="text" name="contact-subject" id="contact-subject" /&gt;
  
      &lt;textarea name="contact-message"&gt;&lt;/textarea&gt;
  
      &lt;input type="file" name="contact-attachment" id="contact-attachment" /&gt;
  
      &lt;button class="btn-classic btn-orange"&gt;&lt;i class="fa fa-paper-plane"&gt;&lt;/i&gt; send&lt;/button&gt;
  
  &lt;/form&gt;  
  </code></pre>
  
  <p>The ajax function : </p>
  
  <pre><code>$(function(contactSubmit) {
  
      var contactForm = $('#tab-contact #contact-form');
      var contactCallback = $('#tab-contact #contact-callback');
  
      $(contactForm).submit(function(event) {
  
          event.preventDefault();
          var contactData = $(contactForm).serialize();
  
          $.ajax({
              type: 'POST',
              url: $(contactForm).attr('action'),
              data: contactData,
          }).done(function(response) {
              $("#contact-callback").addClass("success");
          }).fail(function(data) {
              $("#contact-callback").addClass("fail");
          });
  
      });
  
  
  });  
  </code></pre>
  
  <p>and the 2 php functions to verify the data and send the mail :  </p>
  
  <pre><code>&lt;?php
  
  public static function contact() {
  
      $mail_from_email = filter_var(trim($_POST['contact-email']), FILTER_SANITIZE_EMAIL);
      $mail_from_name = 'User1';
      $mail_to_email = 'webmaster@site.com';
      $mail_to_name = 'Webmaster';
      $mail_subject = '['.$_POST['contact-category'].'] '.trim($_POST['contact-subject']);
      $mail_body = trim($_POST['contact-message']);
      $mail_attachment = $_FILES['contact-attachment'];
  
      $sendMail = action::sendMail($mail_from_email, $mail_from_name, $mail_to_email, $mail_to_name, $mail_subject, $mail_body, $mail_attachment);
  
  }
  
  public static function sendMail($mail_from_email, $mail_from_name, $mail_to_email, $mail_to_name, $mail_subject, $mail_body, $mail_attachment) {
  
      require $_SERVER['DOCUMENT_ROOT'].'/phpmailer/PHPMailerAutoload.php';
  
      $mail = new PHPMailer;
  
      //$mail-&gt;SMTPDebug = 3;                                 // Enable verbose debug output
  
      $mail-&gt;isSMTP();                                        // Set mailer to use SMTP
      $mail-&gt;Host = config::get('mail_smtp_host');            // Specify main and backup SMTP servers
      $mail-&gt;SMTPAuth = true;                                 // Enable SMTP authentication
      $mail-&gt;Username = config::get('mail_smtp_username');    // SMTP username
      $mail-&gt;Password = config::get('mail_smtp_password');    // SMTP password
      $mail-&gt;SMTPSecure = config::get('mail_smtp_security');  // Enable TLS encryption, `ssl` also accepted
      $mail-&gt;Port = config::get('mail_smtp_port');            // TCP port to connect to
  
      $mail-&gt;setFrom($mail_to_email, $mail_from_name);
      $mail-&gt;addAddress($mail_to_email, $mail_to_name);       // Add a recipient
      $mail-&gt;addAddress('');                                  // Name is optional
      $mail-&gt;addReplyTo($mail_from_email, $mail_from_name);
      $mail-&gt;addCC('');
      $mail-&gt;addBCC('');
  
      $mail-&gt;addAttachment($mail_attachment);                 // Add attachments
      $mail-&gt;addAttachment('');                               // Optional name
      $mail-&gt;isHTML(true);                                    // Set email format to HTML
  
      $mail-&gt;Subject = $mail_subject;
      $mail-&gt;Body    = $mail_body;
      $mail-&gt;AltBody = '';
  
      if(!$mail-&gt;send()) {
          return $mail-&gt;ErrorInfo;
      } else {
          return true;
      }
  
  }
  
  ?&gt;  
  </code></pre>
  
  <p>However I've been stuck at step 1 : My php function is unable to retrieve the data from the file input, it seems like ajax isn't sending the informations regarding this input field.<br>
  Php returns <code>Undefined index: contact-attachment</code>.</p>
  
  <p>Can anyone guide/help me through this ? What is wrong with my current code ?</p>