Sending E-Mail with multiple attachments and JavaScript Ajax request

Question

I have a pop up form that sends an email after it has been submitted. It all works fine. I am trying to add 3 upload file fields for documents to be added. I have tried to use the input type="file" with no luck. I have edited the question with my whole code as requested. I have added the code at the bottom that sends the mail

The form works fine. I am just missing these 3 fields for document uploads.

My javascript:

<script language="javascript">
function validate(){
    var f=document.formED;
    if(f.idnumber.value==''){
        alert('ID Number is required');
        f.idnumber.focus();
        return false;
    }
    /** doing the same for each field => remove here **/

    //f.command.value='btn1';
    //f.submit();

}
    function showHide(){
    var f=document.formED;
    if(f.fullnames.value==''){
        f.fullnames.focus();
        return false;
    }
    /** doing the same for each field => remove here **/

    //create an object reference to the div containing images 
    var oimageDiv=document.getElementById('searchingimageDiv') 
    //set display to inline if currently none, otherwise to none 
    oimageDiv.style.display=(oimageDiv.style.display=='none')?'inline':'none' 
    }
</script>
<div class="col-md-8">
    <div class="panel panel-white">
        <!-- Removed the irrelevant HTML content for this question -->
        <div class="panel-body">
            <form onsubmit="return validate()" autocomplete="off" name="formED" action="#" method="post" role="form">
                <!-- Removed the irrelevant HTML content for this question -->

                <div class="form-group">
                    <label for="exampleInputEmail1">License Disk Copy:(Please press control while selecting to choose
                        multiple images)</label>
                    <input type="file" name="multiple_files[1]" multiple="multiple">

                </div>

                <div class="form-group">
                    <label for="exampleInputEmail1">Picture Of Damage:(Please press control while selecting to choose
                        multiple images)</label>
                    <input type="file" name="multiple_files[2]" multiple="multiple">
                </div>

                <div class="form-group">
                    <label for="exampleInputEmail1">License Copy: (Please press control while selecting to choose
                        multiple images)</label>
                    <input type="file" name="multiple_files[3]" multiple="multiple">
                </div>

                <!-- Removed the irrelevant HTML content for this question -->
                <button type="submit" name="newClient" class="btn btn-info" onclick="showHide()">Submit <i
                            class="fa fa-check" aria-hidden="true"></i></button>
            </form>
        </div>
    </div>
</div>

The php that sends the mail:

<?php
$to = 'info@****';
$subject = "New Assessment Request has been submitted by ".$fullnames;
// Get HTML contents from file
$htmlContent = '<div style="font-family:HelveticaNeue-Light,Arial,sans-
serif;background-color:#FFFFFF"><!-- Removed the irrelevant HTML content for this question -->
</div>';

// Set content-type for sending HTML email
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";

// Additional headers
$headers .= 'From: Digiteks Assessment Request<info@****>' . "\r\n";

// Send email
if(mail($to,$subject,$htmlContent,$headers)):

else:
//$errorMsg = 'We are unable to send you a mail, possible your email is a scam..';
endif;  
?>          

Answer 1

Usually you need to add enctype="multipart/form-data" to your from field. If you add multiple attribute to your input field user can select more than one file at once, or you do it with 3 single input fields. type="file" is correct:

<form method="POST" action="/upload" accept-charset="UTF-8" enctype="multipart/form-data">
    <input type="file" name="multiple_files[]" multiple="multiple">
    <input type="file" name="single_file1">
    <input type="file" name="single_file2">
    <input type="file" name="single_file3">
    <input value="Upload" type="submit">
</form>

The enctype="multipart/form-data" part is missing in your Code if you do not use Ajax. You also have an syntax error with the names of your fields. It's multiple_files1[] or multiple_files[1][] not multiple_files[1] .

In your mail() function you do not handle the files, so even if the rest is correct, you do not send it at all, and with mail() this is hard to do.

Try PHPMailer script from here: http://github.com/PHPMailer/PHPMailer
But if you really want to do it with mail() here is a tutorial how you could do it: http://webcheatsheet.com/php/send_email_text_html_attachment.php

Because you did not share the Ajax code (eg jQuery Ajax), I can't check if you have some mistake in your JavaScript Code.

Answer 2

I got it to work after some time working on the headers and MIME

<?php

 error_reporting(E_ALL);
 ini_set('display_errors', 1);

if(isset($_FILES) && (bool) $_FILES) {

$allowedExtensions = array("pdf","doc","docx","gif","jpeg","jpg","png","rtf","txt");

$files = array();
foreach($_FILES as $name=>$file) {
    $file_name = $file['name']; 
    $temp_name = $file['tmp_name'];
    $file_type = $file['type'];
    $path_parts = pathinfo($file_name);
    $ext = $path_parts['extension'];
    if(!in_array($ext,$allowedExtensions)) {
        die("File $file_name has the extensions $ext which is not allowed");
    }
    array_push($files,$file);
}

// email fields: to, from, subject, and so on
$to = "***";
$from = "***"; 
$subject ="New Assessment Request";
$message = "Test Message";

$headers = "From: $from";

// boundary 
$semi_rand = md5(time()); 
$mime_boundary = "==Multipart_Boundary_x{$semi_rand}x"; 

// headers for attachment 
$headers .= "\nMIME-Version: 1.0\n" . "Content-Type: multipart/mixed;\n" . " boundary=\"{$mime_boundary}\""; 

// multipart boundary 
$message = "This is a multi-part message in MIME format.\n\n" . "--{$mime_boundary}\n" . "Content-Type: text/plain; charset=\"iso-8859-1\"\n" . "Content-Transfer-Encoding: 7bit\n\n" . $message . "\n\n"; 
$message .= "--{$mime_boundary}\n";

// preparing attachments
for($x=0;$x<count($files);$x++){
    $file = fopen($files[$x]['tmp_name'],"rb");
    $data = fread($file,filesize($files[$x]['tmp_name']));
    fclose($file);
    $data = chunk_split(base64_encode($data));
    $name = $files[$x]['name'];
    $message .= "Content-Type: {\"application/octet-stream\"};\n" . " name=\"$name\"\n" . 
    "Content-Disposition: attachment;\n" . " filename=\"$name\"\n" . 
    "Content-Transfer-Encoding: base64\n\n" . $data . "\n\n";
    $message .= "--{$mime_boundary}\n";
}
// send

    $ok = mail($to, $subject, $message, $headers); 
if ($ok) { 
     echo '<script language="javascript">';
     echo 'alert("Your Message successfully sent, we will get back to you ASAP.");';
     echo 'window.location.href="index.php";';
     echo '</script>';

} else { 
    echo "<p>mail could not be sent!</p>"; 
} 
}   

?>