The main objective is to enable users to submit their own content for new articles (including text and files) to the administrator's email.
A form has been created for this purpose:
<form class="form form-send" enctype="multipart/form-data">
<div class="send__inputs-block">
<div class="sliding-label__block send__textarea-block">
<textarea name="comment" id="comment" class="input textarea send__textarea" placeholder=" "></textarea>
<label for="comment" class="text text--fz-18 sliding-label">
<?php echo get_post_meta( get_the_ID(), 'joint_send_comment_text', true ); ?>
</label>
</div>
<div class="sliding-label__block">
<input id="name" type="text" name="name" class="input input-text" placeholder=" ">
<label for="name" class="text text--fz-18 sliding-label">
<?php echo get_post_meta( get_the_ID(), 'joint_send_name_text', true ); ?>
</label>
</div>
</div>
<div class="send__file-block">
<input id="file" type="file" name="file" class="input-file" multiple>
<label for="file" class="label label-file">
<i class="joint-upload icon"></i>
<span class="text text--fz-14 upload__text">
<?php echo get_post_meta( get_the_ID(), 'joint_send_file_text', true ); ?>
</span>
</label>
</div>
<button type="submit" class="button form-button">
<span class="button-text">
<?php echo get_post_meta( get_the_ID(), 'joint_send_submit_text', true ); ?>
</span>
</button>
</form>
JS code implementation:
function handleFormSubmission(e, form) {
e.preventDefault()
if (validateForm(form)) return
let serverEndpoint = jointAjax.ajaxurl
let currentPage = ''
let formData = new FormData(form)
if (form.classList.contains('form-contacts')) {
currentPage = 'contacts'
}
else if (form.classList.contains('form-send')){
currentPage = 'send'
let uploadedFiles = []
for (let file of form.file.files) {
uploadedFiles.push(file)
}
console.log(uploadedFiles[0])
formData.append('file', uploadedFiles)
}
else {
return
}
formData.append('action', currentPage)
fetch(serverEndpoint, {
method: 'POST',
body: formData,
})
.then(form.reset())
.catch(error => {
error.json().then(response => {
alert(response.message)
})
})
}
PHP code snippet:
add_action('wp_ajax_send', 'handleFormSubmission');
add_action('wp_ajax_nopriv_send', 'handleFormSubmission');
function handleFormSubmission() {
global $joint_settings;
$data = json_encode($_POST);
$data = json_decode($data, true);
$attachments = array();
if (isset($_FILES['file'])) {
foreach($_FILES['file'] as $key => $file) {
$attachments[] = $file['tmp_name'] . $file['name'];
}
}
$emailBody = '';
foreach ($data as $key => $value) {
if ($key === 'action' || $key === 'file') continue;
if (!empty($data[$key]))
$emailBody .= '<p><strong>' . ucfirst($key) . ':</strong> ' . esc_html($value) . '</p>';
}
$headers = array(
'From: Joint Admin <' . SMTP_FROM . '>',
'content-type: text/html'
);
wp_mail(
$joint_settings['send_mail_to'],
$joint_settings['send_mail_theme'],
$emailBody,
$headers,
WP_CONTENT_DIR . '\\' . $_FILES['file']['name']
);
// wp_send_json_success($_FILES['file']['tmp_name'] . '\\' . $_FILES['file']['name']);
I've exhaustively searched through various forums, articles, and tutorials, but I'm still struggling with this task.
In the wp_mail function, we need to provide the full path to the file, but where can we obtain that path?
Despite my efforts to process multiple files, the function only returns the name of the last file in response.
SMTP settings are correct, emails are being received, but without any attachments.
Please assist me - I'm at a loss on how to proceed.