PHPMailer Ajax AddAttachment not working

Question

I have a HTML form with an input type file and I would like get the file submitted attached with the email sent.

The fact is that I don't receive the file but all the others information like name, email address, phone number are well coming.

Here is my HTML (simplified with only the input file):

<form enctype="multipart/form-data" id="contact-form-cv" name="contact-form-cv" method="POST" data-name="Contact Form CV">

<div class="form-group">

    <div class="controls">

        <!-- FILE -->
        <input type="hidden" name="MAX_FILE_SIZE" value="300000">
        <input type="file" name="cv-file" id="file" class="input-file form-control special-form my-file">
          <label for="file" class="btn btn-tertiary js-labelFile">

            <span class="js-fileName"><i class="fa fa-upload"></i>&nbsp; Attach CV*</span>
          </label>

        <!-- Button -->
        <button id="cv-valid-form" type="submit" class="btn btn-lg submit">Submit</button>

    </div>

</div>

JS

I have a JS file used to display alert messages when the user is filling the form :

$("#contact-form-cv [type='submit']").click(function(e) {
e.preventDefault();

// Get input field values of the contact form
var cvuser_file       = $('input[name=cv-file]').val();

// Datadata to be sent to server
post_data = {'cvuserFile':cvuser_file};

// Ajax post data to server
$.post('../contact-me-cv.php', post_data, function(response){  

    // Load json data from server and output message    
    if(response.type == 'error') {

        ...

    } else {

        ...

    }

}, 'json');

});

PHP

<?php

// Use PHP To Detect An Ajax Request
if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {

    // Exit script for the JSON data
    $output = json_encode(
    array(
        'type'=> 'error',
        'text' => 'Request must come from Ajax'
    ));

    die($output);
}

if(empty($_POST["cvuserFile"])) {
    $output = json_encode(array('type'=>'error', 'text' => '<i class="icon ion-close-round"></i> Please attach your CV'));
    die($output);
}

$path = 'upload/' . $_FILES["cvuserFile"]["name"];
move_uploaded_file($_FILES["cvuserFile"]["tmp_name"], $path);

require 'php/class/class.phpmailer.php';

$mail = new PHPMailer();

//Set PHPMailer to use SMTP.
$mail->IsSMTP();       
//Set SMTP host name                          
$mail->Host = 'smtp.gmail.com';                           
//Set TCP port to connect to 
$mail->Port = '587';
//Set the encryption system to use - ssl (deprecated) or tls
$mail->SMTPSecure = 'tls';
//Set this to true if SMTP host requires authentication to send email
$mail->SMTPAuth = true;

$mail->isHTML(true);

//Provide username and password yo your google account   
$mail->Username = "*****@gmail.com";                 
$mail->Password = "*******";   

$mail->WordWrap = 50;

$mail->From = $_POST["cvuserEmail"];
$mail->FromName = $_POST["cvuserName"];
$mail->setFrom('*****', '**** ****');
$mail->addAddress('*****', 'John Doe');
//Set the subject line

$mail->AddAttachment($path);

$mail->Subject = 'New message from my website!';

$mail->Body = 'Hello' . "\r\n" ;

if(!$mail->send()) 
{
    $output = json_encode(array('type'=>'error', 'text' => '<i class="icon ion-close-round"></i> Oops! Looks like something went wrong, please check your PHP mail configuration.'));
    die($output);
    unlink($path);
} 
else 
{
    $output = json_encode(array('type'=>'message', 'text' => '<i class="icon ion-checkmark-round"></i> Hello '.$_POST["cvuserName"] .', Your message has been sent, we will get back to you asap !'));
    die($output);
}
?>

Using the form without AJAX is working smoothly but not using it like above.

Answer 1

You can't upload a file via ajax the way you are doing. When you do $('input[name=cv-file]').val() you are getting the file name but the file isn't beign uploaded.

Check this post for a valid method: Sending multipart/formdata with jQuery.ajax