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> <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