I'm having real issues getting a file uploaded through the PHPMailer form to attach to the email sent through gmail TLS. Can anyone help? I'm not a developer.
I can send a random file from a path, but I can't get the uploaded file through the form to attach. I think it might be because I'm setting the moving file part wrong. so no path exists?
Many thanks
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var contactForm = document.getElementById('frmContact');
var templateUrl = '<?= get_bloginfo("template_url"); ?>/blocks/sendmessage_recruit.php';
if (contactForm) {
contactForm.addEventListener("submit", function(e) {
e.preventDefault();
var mailStatusEl = document.getElementById('mail-status');
var sendMessageEl = document.getElementById('send-message');
var loaderIconEl = document.getElementById('loader-icon');
mailStatusEl.style.display = "none";
sendMessageEl.style.display = "none";
loaderIconEl.style.display = "block";
var name = document.querySelector('input[name="name"]').value;
var email = document.querySelector('input[name="email"]').value;
var phone = document.querySelector('input[name="phone"]').value;
var content = document.querySelector('textarea[name="content"]').value;
var userfile = document.querySelector('input[name="userfile"]').value;
// var recaptcha = document.querySelector('textarea[id="g-recaptcha-response"]').value;
var data = {
"name": name,
"email": email,
"phone": phone,
"content": content,
"userfile": userfile,
// "g-recaptcha-response": recaptcha
};
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
mailStatusEl.style.display = "block";
if (this.readyState == 4) {
if (this.status == 200) {
loaderIconEl.style.display = "none";
var responseData = JSON.parse(this.responseText);
if (responseData.type == 'error') {
sendMessageEl.style.display = "block";
mailStatusEl.className += " error";
} else {
sendMessageEl.style.display = "none";
mailStatusEl.className += " success";
}
mailStatusEl.innerHTML= responseData.text;
} else {
sendMessageEl.style.display = "block";
mailStatusEl.className += " error";
mailStatusEl.innerHTML = "Oh no! Something went wrong! Get in touch with us at info@northwindhealthcare.com";
}
}
}
var formData = new FormData();
Object.keys(data).forEach(key => formData.append(key, data[key]));
xhttp.open("POST", templateUrl, true);
xhttp.send(formData);
});
}
});
</script>
<div class="enquiryform">
<h2 class="enquiryform__title">Tell us about yourself and your current training (if any)</h2>
<p>Please include as much relevant detail and experience as you can in the required fields.</p>
<form id="frmContact" action="" method="POST" novalidate="novalidate" enctype="multipart/form-data">
<div class="field">
<input type="text" id="name" name="name" title="Please enter your name" class="required field__input" required>
<label class="field__label">Name:</label>
</div>
<div class="field">
<input type="email" id="email" name="email" title="Please enter your email address" class="required email field__input" required>
<label class="field__label">Email:</label>
</div>
<div class="field">
<input type="text" id="phone" name="phone" title="Please enter your contact number" class="required phone field__input" required>
<label class="field__label">Contact number:</label>
</div>
<div class="textarea">
<textarea id="comment-content" class="required" name="content" rows="4" class="field__input"></textarea>
<label for="comment-content" class="field__label" id="addmessage">Tell us about you</label>
</div>
<hr>
<h3 class="brand sans heavy"><i class="fa-solid fa-upload"></i> Upload your CV</h3>
<p class="small-font-size">Please upload a copy of your CV (pdf,doc,docx)</p>
<input name="userfile" type="file">
<p> </p>
<div id="mail-status" class="enquiryform__mail-status"></div>
<p id="loader-icon"><i class="fas fa-spinner fa-pulse"></i> Sending</p>
<button type="Submit" id="send-message" class="button button--small button--solid">Submit</button>
</form>
</div>
And the send message operator
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\SMTP;
use PHPMailer\PHPMailer\Exception;
require 'PHPMailer/src/Exception.php';
require 'PHPMailer/src/PHPMailer.php';
require 'PHPMailer/src/SMTP.php';
require 'PHPMailer/src/OAuth.php';
//Don't run this unless we're handling a form submission
if (array_key_exists('email', $_POST)) {
date_default_timezone_set('Etc/UTC');
//Create a new PHPMailer instance
$mail = new PHPMailer(true);
//Commenting out to work on live. Consider testing on Digital Ocean after move
$mail->isSMTP();
$mail->SMTPAuth = true;
$mail->SMTPSecure = 'tls';
$mail->Host = 'smtp.gmail.com';
$mail->Port = '587';
$mail->isHTML();
$mail->Username = '#########';
$mail->Password = '########';
$user_name = filter_var($_POST["name"], FILTER_SANITIZE_STRING);
$user_email = filter_var($_POST["email"], FILTER_SANITIZE_EMAIL);
$user_phone = filter_var($_POST["phone"], FILTER_SANITIZE_EMAIL);
$content = filter_var($_POST["content"], FILTER_SANITIZE_STRING);
if(empty($user_name)) {
$empty[] = "<b>Name</b>";
}
if(empty($user_email)) {
$empty[] = "<b>Email</b>";
}
if(empty($user_phone)) {
$empty[] = "<b>Contact number</b>";
}
if(empty($content)) {
$empty[] = "<b>Message</b>";
}
if(!empty($empty)) {
$output = json_encode(array('type'=>'error', 'text' => implode(", ",$empty) . ' Required!'));
die($output);
}
//Use a fixed address in your own domain as the from address
//**DO NOT** use the submitter's address here as it will be forgery
//and will cause your messages to fail SPF checks
$mail->setFrom('#######', '######');
//Send the message to yourself, or whoever should receive contact for submissions
$mail->addAddress('#######', '######');
//Put the submitter's address in a reply-to header
//This will fail if the address provided is invalid,
//in which case we should ignore the whole request
$uploadfile = tempnam(sys_get_temp_dir(), hash('sha256', $_FILES['userfile']['name']));
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
$mail->addAttachment($uploadfile, 'My uploaded file');
}
if(!filter_var($user_email, FILTER_VALIDATE_EMAIL)){ //email validation
$output = json_encode(array('type'=>'error', 'text' => '<b>'.$user_email.'</b> is an invalid Email, please correct it.'));
die($output);
}
if ($mail->addReplyTo($_POST['email'], $_POST['name'])) {
$mail->Subject = '##### | RECRUIT enquiry from ' . $user_name;
//Keep it simple - don't use HTML
$mail->isHTML(false);
// Build a simple message body and it must have no spaces, indents or tabs before each line!! Or it breaks!!
$mail->Body = <<<EOT
Email: {$_POST['email']}
Contact Number: {$_POST['phone']}
Name: {$_POST['name']}
Message: {$_POST['content']}
EOT;
//Send the message, check for errors
if (!$mail->send()) {
$output = json_encode(array('type'=>'error', 'text' => 'Unable to send email,'));
die($output);
} else {
$output = json_encode(array('type'=>'message', 'text' => 'Hi '.$user_name .', thank you for the message. We will get back to you shortly.'));
die($output);
}
} else {
$output = json_encode(array('type'=>'error', 'text' => 'Invalid email, please contact'.SENDER_EMAIL));
die($output);
}
}
?>
This
var userfile = document.querySelector('input[name="userfile"]').value;
is the problem. To get the file(s) from a file input element you have to use the files property, not value.
It's an array so if you just know you want one file, use files[0].
var userfile = document.querySelector('input[name="userfile"]').files[0];