Sending a file from form to email

Question

I am trying to figure out how to send a file that containts things like images to text files, etx from a form submission through ajax to my php file to send into an email. I am trying to format it the way I have my other data in ajax and php email, but I can tell the form stops right away in my ajax. It doesn't even send through to my php, but I am not sure if I have the email part right either.

This is what I tried so far. I tried to delete as much obsolete code as possible, but still include enough to give a good feeling for what I am trying to do.

How can I make this file attach/send into an email from a form through AJAX to my php email

<form action="" autocomplete="on" method="POST" id="project-information-form" enctype="multipart/form-data">
  <input type="text" class="input-borderless" id="project-name" name="name" placeholder="Your Name">
  <input type="email" class="input-borderless" id="project-email" name="email" placeholder="Email Address">
  <input type="number" class="input-borderless" id="project-number" name="phone" placeholder="Phone Number">
  <input type="file" name="file" id="file" class="inputfile" data-multiple-caption="{count} files selected" multiple>
  <label for="file"><span id="file-upload-image"><img src="/icons/white-upload.png" height="25px" width="25px"></span>File Upload</label>
  <input type="submit" id="submit-project" class="submit-project-button" value="Send Project Inquiry">
</form>

AJAX

   $("#submit-project").on("click", function(event) {
     // event.preventDefault();

      var project_name = $("#project-name").val();
      var project_email = $("#project-email").val();
      var project_number = $("#project-number").val();
      var uploaded_file = $("#file").val();
        submitHandler: function(form) {
console.log(form);
          $.ajax({
            url: "email-project.php",
            type: "POST",
            data: {
              "project_name": project_name,
              "project_email": project_email,
              "project_number": project_number,
              "file": project_file
            },
            success: function(data) {
              //console.log(data); // data object will return the response when status code is 200
              if (data == "Error!") {
                alert("Unable to send email!");
                alert(data);
              } else {
              }
            },

PHP Page for email

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

$project_name           = $_POST['project_name'];
$project_email          = $_POST['project_email'];
$project_number         = $_POST['project_number'];
$project_file           = $_POST['file'];

$to = '';
$subject = '';
$message = '
    <html>
    <head>
        <title>Project Inquiry Form Sent</title>
    </head>
    <body>
        <p>There has been a Project submitted. Here are the details:</p><br>
        <p>Name: '. $project_name .'</p>
        <p>Email: '. $project_email .'</p>
        <p>Phone Number: '. $project_number .'</p>
        <p>The client uploaded a file ' .$project_file.'.</p>

    </body>
    </html>
';
// To send HTML mail, the Content-type header must be set
$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= 'From:' .$project_email . "\r\n";

if (!empty($project_email)) { 
    if (filter_var($project_email, FILTER_VALIDATE_EMAIL)) { 

        //Should also do a check on the mail function
        if (mail($to, $subject, $message, $headers)) {
            echo "Your email was sent!"; // success message
        } else {
            echo "Mail could not be sent!"; // failed message
        }

    } else { 
        //Invalid email
        echo "Invalid Email, please provide a valid email address.";
    }

} else {
    echo "Email Address was not filled out.";
}

you know that JSON cannot have a property that holds a file value right? — HenryDev, Apr 09 '16 at 03:09
take a look at the example I posted right below. Hope it helps you :)! — HenryDev, Apr 09 '16 at 03:24

score 0 · Answer 1 · edited May 23 '17 at 12:15

You need a script that runs on the server to move the file to the uploads directory. The jQuery ajax method sends the form data to the server, then a script on the server handles the upload.

Here's an example using PHP. Take a look at this example.

Credit goes here -> jQuery AJAX file upload PHP

$('#submit-project').on('click', function() {
var file_data = $('#file').prop('files')[0];   
var form_data = new FormData();                  
form_data.append('file', file_data);
alert(form_data);                             
$.ajax({
            url: 'email-project.php', // point to server-side PHP script 
            dataType: 'text',  // what to expect back from the PHP script, if anything
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,                         
            type: 'post',
            success: function(php_script_response){
                alert(php_script_response); // display response from the PHP script, if any
            }
 });
});

Will adding the items in the success mess with anything I have going on right now in it? — Becky, Apr 09 '16 at 03:26

Sending a file from form to email

1 Answers1