I have already sent emails using ajax and sinatra using pony and so tried to then add in attachments, but when I try to add it I cannot get it to send the attachment. It does send the email but the attachment is set as noname and when I change it's extension to .docx to view it, it looks like this

----==_mimepart_559cc76aa4b6f_84433ffe5e0ae1b8555f0
Content-Type: text/plain;
 charset=UTF-8
Content-Transfer-Encoding: 7bit

Joe Bloggs has applied for the position of Software Engineer
joe@example.com


----==_mimepart_559cc76aa4b6f_84433ffe5e0ae1b8555f0
Content-Type: application/vnd.openxmlformats-officedocument.wordprocessingml.document;
 charset=UTF-8;
 filename=test_resume_1.docx
Content-Transfer-Encoding: base64
Content-Disposition: attachment;
 filename=test_resume_1.docx
Content-ID: <test_resume_1.docx@Simons-MacBook-Pro-2.local>

UEsDBBQABgAIAAAAIQAxwq+8iAEAABMGAAATAAgCW0NvbnRlbnRfVHlwZXNd
LnhtbCCiBAIooAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
*repeated*

I have been banging my head against the table for the last 2 days and cannot work this out. I don't know which part of my code is wrong, as far as I can tell I am getting all the correct information from my forms using ajax and then as it's being sent most of it is working except for the attachment so I believe it is just something I am doing wrong for the attachment

Here is my code that I am using

HTML

  <form id="application-form" class="box" action="/job-form" method="POST" enctype="multipart/form-data">
    <div class="form-group">
      <input type="text" class="form-control" id="fullName" placeholder=" NAME" required>
    </div>
    <div class="form-group">
      <input type="hidden" id="position" value="">
      <input type="email" class="form-control" id="email" placeholder=" E-MAIL" required>
    </div>
    <div class="form-group">
      <div class="form-control" id="cv" placeholder=" CV">
        <i class="fa fa-file-text"></i>&nbsp;&nbsp;<span class="file-text">UPLOAD YOUR CV </span>
      </div>
        <input type="file" id="cv-file" name="attachement" style="float:right;display:none"/>
      </div>
    <div class="form-group">
      <textarea rows="5" class="form-control" id="cover-letter" placeholder=" COVER LETTER"></textarea>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-">
          <button type="submit" class="btn btn-form">Submit</button>
      </div>
    </div>
  </form>

Javascript

  $('#application-form').on('submit', function(event) {
    event.preventDefault();
    var form = $(this);
    var fd = new FormData();
    fd.append( 'file', $("#cv-file")[0].files[0] );
    fd.append("fullName", $("#fullName").val());
    fd.append("email", $("#email").val());
    fd.append("coverLetter", $("#cover-letter").val());
    fd.append("position", $("#position").val());

    $.ajax({
      url: form.attr('action'),
      processData: false,
      contentType: false,
      type: 'POST',
      data: fd,
      error: function(req, err){
        console.log('error message: ' + err);
        $(".form-message-box").html(err);
        $(".form-message-box").animate({"opacity":"1"},"slow").animate({"opacity":"0"},2000);
      },
      success: function(json) {
        $(".form-message-box").html("Successful!");
        $(".form-message-box").animate({"opacity":"1"},"slow").animate({"opacity":"0"},2000);
      }
    })
  });

Ruby

  post '/job-form', :provides => :json do

    Pony.mail({
    :to => ENV["TO_ADDRESS"],
    :via => :smtp,
    :from => ENV["EMAIL_ADDRESS"],
    :subject => "Application for #{params["position"]}",
    :body => params["fullName"] + " has applied for the position of " + params["position"] + "\n" + params["email"] + "\n\n" + params["coverLetter"],
    :attachments => {
      File.basename(params[:file][:filename]) => File.read(params[:file][:tempfile])
    },
    :headers => { "Content-Type" => "multipart/mixed", "Content-Transfer-Encoding" => "base64", "Content-Disposition" => "attachment" },
    :via_options => {
      :address        => 'smtp.gmail.com',
      :port           => '25',
      :user_name      => ENV["EMAIL_ADDRESS"],
      :password       => ENV["EMAIL_PASSWORD"],
      :authentication => :plain,
      :domain         => ENV["DOMAIN"]
      }
    })
    puts file
    puts params
  end

Fixed by using Mail

I finally switched to Mail and had no problems sending the attachment. Here is my Mail code for anyone else having the same problems with pony and haven't worked it out

options = { :address          => "smtp.gmail.com",
        :port                 => 25,
        :domain               => ENV["DOMAIN"],
        :user_name            => ENV["EMAIL_ADDRESS"],
        :password             => ENV["EMAIL_PASSWORD"],
        :authentication       => 'plain',
        :enable_starttls_auto => true  }

Mail.defaults do
  delivery_method :smtp, options
end


post '/job-form' do

  full_name = params["fullName"]
  position = params["position"]
  email = params["email"]
  cover_letter = params["coverLetter"]
  file_name = params[:file][:filename]
  tempfile = params[:file][:tempfile]

  Mail.deliver do
    to      ENV["TO_ADDRESS"]
    from    ENV["EMAIL_ADDRESS"]
    subject "Application for #{position}"
    body    "#{full_name} has applied for the position of #{position}\n#{email}\n\n#{cover_letter}"
    add_file :filename => file_name, :content => File.read(tempfile)
  end

end