Search code examples
phpjqueryemailemail-attachments

Jquery send the email with attachments

I am working on the jquery to upload the attachments so I can post the files name via ajax. I have got a problem with storing the files name in the array and display each file name in the loop, because it will store 2 files name in the array in one index using this code:

$(".file-list_yhs").each(function() {
    attachments[i++] = $(this).find('.vI').text();
});

Output:

Array
{
    [0] => uploads/add email.txtemail.zip
}
Array

It should be:

Array
{
    [0] => uploads/add email.txt
}
Array
{
    [1] => uploads/email.zip
}

Here is the full code:

$(document).on('click','#domodal_send', function(e) {

    if ($(".notify-outer").css('display') == 'none') {

        var email = $("#domodal_email_receipt").val();
        var subject = $("#domodal_subject").val();
        var from_name = $("#avater_name").text();
        var from_email = $('#avater_email').text();
        var emailbody = $("#domodal_message").html();
        var attachments = [];
        var i = 0;

        $(".file-list_yhs").each(function() {
            attachments[i++] = $(this).find('.vI').text();
        });


         $.ajax({
                url: 'sendMail.php',
                type: 'POST',

                data : {
                    send_to: email,
                    from: from_name,
                    from_email: from_email,
                    emailsubject: subject,
                    emailbody: emailbody,
                    emailattachment: attachments
                },

                success: function(result)
                {
                    alert(result);
                }
         });
    }
});

SendMail.php:

<?php
require_once "Mail.php";
require_once "Mail/mime.php";
require_once('Mail/IMAPv2.php');

//Connect to the database
include('config.php');

$inbox = '{imap.example.com:993/imap/ssl/novalidate-cert}INBOX';
$mailserver = '{imap.example.com:993/imap/ssl/novalidate-cert}INBOX.Sent';

if (isset($_POST['send_to']))
{
    $from = "Robert <rob@example.com>";
    $to_email = $_POST['send_to'];
    $to = $firstname . " <$to_email>";
    $subject = $_POST['emailsubject'];
    $message = $_POST['emailbody'];
    $message_without_image = $_POST['emailbody'];
    $filenames =  $_POST['emailattachment'];
    $files = [];

    foreach ($filenames as $filename) {
        $files[] = 'uploads/' . $filename;
    }
    print_r($files);

    $username = 'username';
    $password = 'password';
    $smtp_hostname = "smtp.example.com";
    $port = "587";
    echo $files;

    /*$messageID = sprintf("<%s.%s@%s>",
            base_convert(microtime(), 10, 36),
            base_convert(bin2hex(openssl_random_pseudo_bytes(8)), 16, 36),
            'example.com');
    $date = date('Y-m-d H:i:s');
    $emailID = '';
    $sent_db = "SELECT email_id FROM sent WHERE email_id = '$messageID'";
    $sent_result = mysqli_query($link, $sent_db) or die($link->error);

    if(mysqli_num_rows($sent_result) == 0)
    {
        $sent_db1 = "INSERT INTO sent (id, email_id, email, sendDateTime, isRead, readDateTIme) VALUES ('', '$messageID', '$to', '$date', '0', '0000-00-00 00:00:00')";

        if (mysqli_query($link, $sent_db1)) {
            $emailID = mysqli_insert_id($link);
        }
    }
    $message .= "<img src=\"http://test.example.com/project/track/Images/signature.gif?id=".$emailID."&etc=".time()." \" style=\"width: 0; max-height:0; overflow:hidden; \">";

    $headers = array ('From' => $from, 
        'To' => $to, 'Subject' => $subject,
        'Reply-To' => $from,
        'Content-Type'  => 'Content-Type: text/plain; charset=UTF-8',
        'MIME-Version' => '1.0',
        'Received' => 'from smtp.example.com',
        'Date'  => date("r"),
        'Message-ID' => sprintf("<%s.%s@%s>",
            base_convert(microtime(), 10, 36),
            base_convert(bin2hex(openssl_random_pseudo_bytes(8)), 16, 36),
            'example.com'));

    $params = array ('host' => $smtp_hostname,
        'port' => $port,
        'auth' => 'PLAIN', // Note 1
        'socket_options' => array('ssl' => array('verify_peer_name' => false, 'verify_peer' => false)), // Note 2
        'username' => $username,
        'password' => $password);

    $mime_params = array(
        'text_encoding' => '7bit',
        'text_charset'  => 'UTF-8',
        'html_charset'  => 'UTF-8',
        'head_charset'  => 'UTF-8'
    );

    $crlf = "\r\n";
    $mime = new Mail_mime(array('eol' => $crlf));
    $body = $message;

    $mime->setTXTBody($body);
    $mime->setHTMLBody($body);

    if(!empty($files)) {
        $mime->addAttachment($files);
    }
    $body = $mime->get($mime_params);
    $headers = $mime->headers($headers);
    $smtp = Mail::factory ('smtp', $params);
    $mail = $smtp->send($to, $headers, $body);

    if (PEAR::isError($mail)) 
    {
        echo("<p>" . $mail->getMessage() . "</p>");
    }
    else 
    {
        echo("<p>Email has been sent!</p>");
    }
}
?>

What I am trying to do is to store the files name in the array and post it via ajax after I have uploaded the files on my server. When the files is upload on the server, I can be able to output each files name to add the files location on the server and send the email with the attachments.

Can you please show me an example how I could store each file name in the loop where I could use it to post it with ajax to output each file name?

Thank you.

EDIT: Here is the html:

<div style="width: 70%; margin-left: 10px; position:relative;" class="file-list_yhs">
  <div class="dL" tabindex="-1" id=":vw" aria-label="Attachment: edit_link1.png. Press enter to view the attachment and delete to remove it" style="position:relative;">
    <input id=":vp" name="attach" type="hidden" value="#msg-a:r-6685135251679589431_#msg-a:r-6685135251679589431_null_-1" checked="">
    <div style="display:flex">
      <a class="dO" id=":vq" style="display:flex;">
        <div id="domodal_attachment" class="vI">addd her email.txt</div>
        <div class="vJ">(0K)</div>
      </a>
      <div id=":vn" role="button" aria-label="Remove attachment" class="vq" tabindex="-1" data-tooltip="Remove attachment" style="position:absolute; right:5px; top:5px;"></div>
    </div>

  </div>
  <div class="dL" tabindex="-1" id=":vw" aria-label="Attachment: edit_link1.png. Press enter to view the attachment and delete to remove it" style="position:relative;">
    <input id=":vp" name="attach" type="hidden" value="#msg-a:r-6685135251679589431_#msg-a:r-6685135251679589431_null_-1" checked="">
    <div style="display:flex">
      <a class="dO" id=":vq" style="display:flex;">
        <div id="domodal_attachment" class="vI">email.zip</div>
        <div class="vJ">(183K)</div>
      </a>
      <div id=":vn" role="button" aria-label="Remove attachment" class="vq" tabindex="-1" data-tooltip="Remove attachment" style="position:absolute; right:5px; top:5px;"></div>
    </div>
  </div>
</div>
Solution

  • You're creating an array element for each .file-list_yhs DIV, not for each .vI DIV. $(this).find('.vI').text() will concatenate the texts of all the .vI elements that it finds in each .file-list_yhs.

    Change your loop to

    $(".file-list_yhs .vI").each(function() {
    attachments.push($(this).text());
}

    You can also use .map:

    attachments = $(".file-list_yhs .vI").map(function() {
    return $(this).text();
}).get();

    .get() is needed at the end to convert the jQuery object that .map() returns to an array.