title: How to Send Email With Form data and Attachment Using Angularjs and PHP
body: <p>Actually I am Sending an E Mail that can process file attachments. Recently I shifted to angular, I am trying to post the form data and able to process the email, but unable to send the attachment.</p>
  
  <p>The Html Form</p>
  
  <pre><code>&lt;div ng-controller="ContactController" class="panel-body"&gt;
      &lt;form class="form-horizontal" ng-submit="submit(contactform)" name="contactform" method="post" novalidate enctype="multipart/form-data"&gt;
          &lt;fieldset&gt;
              &lt;!-- Form Name --&gt;
              &lt;legend&gt;Online Manuscript Submission&lt;/legend&gt;
              &lt;br&gt;
              &lt;!-- Select Basic --&gt;
              &lt;div class="form-group"&gt;
                  &lt;label class="col-md-4 control-label" for="manuscripttype"&gt;Manuscript Type&lt;/label&gt;
                  &lt;div class="col-md-4"&gt;
                      &lt;select ng-model="formData.manuscripttype" id="manuscripttype" name="manuscripttype" class="form-control input-md" required=""&gt;
                          &lt;option value="Article"&gt;Article&lt;/option&gt;
                          &lt;option value="Communication"&gt;Communication&lt;/option&gt;
                          &lt;option value="Review"&gt;Review&lt;/option&gt;
                          &lt;option value="Technical Note"&gt;Technical Note&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;br&gt;
                &lt;!-- File Button --&gt;
              &lt;div class="form-group"&gt;
                  &lt;label class="col-md-4 control-label" for="coverletter"&gt;Cover Letter&lt;/label&gt;
                  &lt;div class="col-md-4"&gt;
                      &lt;input id="coverletter" file-input="file" name="coverletter" class="input-file" type="file" required=""&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- Button (Double) --&gt;
              &lt;div class="form-group"&gt;
                  &lt;div class="col-md-8"&gt;
                      &lt;button type="submit" name="submit" type="submit" value="Send" class="btn btn-success"&gt;Submit&lt;/button&gt;
                      &lt;button type="reset" class="btn btn-warning"&gt;Reset&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/fieldset&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the Controller</p>
  
  <pre><code>app.controller('ContactController', function($scope, $http) {
  $scope.result = 'hidden'
  $scope.resultMessage;
  $scope.formData; //formData is an object holding the name, email, subject, and message
  $scope.submitButtonDisabled = false;
  $scope.submitted = false; //used so that form errors are shown only after the form has been submitted
  
  $scope.submit = function(contactform) {
      console.log($scope.file);
      $scope.submitted = true;
      $scope.submitButtonDisabled = true;
      if (contactform.$valid) {
          $http({
              method: 'POST',
              url: 'contact-form.php',
              data: "manuscripttype=" + $scope.formData.manuscripttype +
  
                  "&amp;file=" + $scope.file,
              headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
          }).success(function(data) {
              console.log(data);
              if (data.success) { //success comes from the return json object
                  $scope.submitButtonDisabled = true;
                  $scope.resultMessage = data.message;
                  $scope.result = 'bg-success';
              } else {
                  $scope.submitButtonDisabled = false;
                  $scope.resultMessage = data.message;
                  $scope.result = 'bg-danger';
              }
          });
      } else {
          $scope.submitButtonDisabled = false;
          $scope.resultMessage = 'Failed :( Please fill out all the fields.';
          $scope.result = 'bg-danger';
      }
  }
   });
   app.directive("fileInput", ['$parse', function($parse) {
    return {
      restrict: 'A',
      link: function(scope, element, attributes) {
          element.bind("change", function() {
              $parse(attributes.fileInput)
                  .assign(scope, element[0].files)
              scope.$apply();
          });
      }
     }
   }]);
  </code></pre>
  
  <p>And the PHP</p>
  
  <pre><code>&lt;?php
  if ($_SERVER['REQUEST_METHOD'] == 'POST') {
  
      //Reciever Details
      $from = 'Test Mail'; 
      $to = 'myemail@email.com'; 
      $subject = 'Paper Submission ';
      $from = stripslashes($_POST['manuscripttype'])."&lt;".stripslashes($to)."&gt;";        
  
      $manuscripttype = $_POST['manuscripttype'];       
  
      // generate a random string to be used as the boundary marker
      $mime_boundary="==Multipart_Boundary_x".md5(mt_rand())."x";
  
      // now we'll build the message headers
      $headers = "From: $from\r\n" .
      "MIME-Version: 1.0\r\n" .
      "Content-Type: multipart/mixed;\r\n" .
      " boundary=\"{$mime_boundary}\"";
  
      // here, we'll start the message body.
      // this is the text that will be displayed
      // in the e-mail
      $message="Paper Submission  \n
          Manuscript Type       = $manuscripttype.\n
  
    Uploaded Files
  
          Cover Letter          = Attached as Attachement with this Mail.\n         
  
  // next, we'll build the invisible portion of the message body
      // note that we insert two dashes in front of the MIME boundary 
      // when we use it
      $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";
  
  // now we'll process our uploaded files
      foreach($_FILES as $userfile){
      // store the file information to variables for easier access
      $tmp_name = $userfile['tmp_name'];
      $type = $userfile['type'];
      $name = $userfile['name'];
      $size = $userfile['size'];        
  
      // if the upload succeded, the file will exist
      if (file_exists($tmp_name)){
  
      // check to make sure that it is an uploaded file and not a system file
      if(is_uploaded_file($tmp_name)){
  
      // open the file for a binary read
      $file = fopen($tmp_name,'rb');
  
      // read the file content into a variable
      $data = fread($file,filesize($tmp_name));
  
       // close the file
       fclose($file);
  
          // now we encode it and split it into acceptable length lines
          $data = chunk_split(base64_encode($data));
       }
  
       // now we'll insert a boundary to indicate we're starting the attachment
       // we have to specify the content type, file name, and disposition as
       // an attachment, then add the file content.
       // NOTE: we don't set another boundary to indicate that the end of the 
       // file has been reached here. we only want one boundary between each file
       // we'll add the final one after the loop finishes.
       $message .= "--{$mime_boundary}\n" .
          "Content-Type: {$type};\n" .
          " name=\"{$name}\"\n" .
          "Content-Disposition: attachment;\n" .
          " filename=\"{$fileatt_name}\"\n" .
          "Content-Transfer-Encoding: base64\n\n" .
       $data . "\n\n";
    }
   }        
  
      // here's our closing mime boundary that indicates the last of the  message
    $message.="--{$mime_boundary}--\n";
   // now we just send the message
   if (@mail($to, $subject, $message, $headers))
    echo "Message Sent";
   else
      echo "Failed to send";
     } 
     ?&gt;
  </code></pre>
  
  <p>By Using this PHP I am able to send the Attachments and form data but using the angular I am unable to post in angular. Please suggest any changes or errors that I have done.</p>