I have a modal with this email form inside of it. I have tried so many different ways to do this. I'm just not seeing what I'm missing here. I'm able to send emails without attachments, but once I added the fileData everything is null when it hit the server. Any help here would be appreciated.
HTML
<form id="Email_form" method="post">
<div class="form-row">
<div class="col-md-10 mb-3">
<label for="validationCustom01">To:</label>
<input type="text" class="form-control" id="EmailTo_input" value="">
</div>
</div>
<div class="form-row">
<div class="col-md-8 mb-3">
<label for="validationCustom01">Cc:</label>
<input type="text" class="form-control" id="EmailCc_input" value="">
</div>
</div>
<div class="form-row">
<div class="col-md-10 mb-3">
<label for="validationCustom01">Bcc:</label>
<input type="text" class="form-control" id="EmailBcc_input" value="">
</div>
</div>
<div class="form-row">
<div class="col-md-10 mb-3">
<label for="validationCustom01">Subject:</label>
<input type="text" class="form-control" id="EmailSubject_input" value="">
</div>
</div>
<div class="form-row">
<div class="col-md-10 mb-3">
<label for="validationCustom01">Attachment:</label>
<input type="file" class="" style="height:auto" multiple=multiple id="EmailAttachment_input">
</div>
</div>
<div class="form-row">
<div class="col-md-10 mb-3">
<label for="validationCustom01">Email Body:</label>
<div type="text" class="form-control" style="height:auto" contenteditable="true" id="EmailBody_input">
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-10 mb-3">
<label for="validationCustom01">Signature:</label>
<div type="text" class="form-control" style="height:auto" contenteditable="true" id="EmailSignature_input">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="btn_Email" class="btn btn-primary">Send Email</button>
</div>
</form>
JAVASCRIPT
$('#btn_Email').on('click', function(e) {
var attachment = $("#EmailAttachment_input").get(0);
var files = attachment.files;
var fileData = new FormData();
console.log("number of Files " + files.length)
for (var i = 0; i < files.length; i++) {
console.log("FileName: " + files[i].name);
console.log("file" + files[i]);
fileData.append(files[i].name, files[i]);
}
console.log("to:" + $('#EmailTo_input').val())
$.ajax({
type: 'POST',
url: '?handler=EmailSend',
beforeSend: function(xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
data: { to: $('#EmailTo_input').val(), cc: $('#EmailCc_input').val(), bcc: $('#EmailBcc_input').val(), subject: $('#EmailSubject_input').val(), body: $('#EmailBody_input').html(), signature: $('#EmailSignature_input').html(), attachments: fileData },
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
success: function(e) {
$('#EmailToast').toast('show');
$('#EmailTo_input').val('');
$('#EmailCc_input').val('');
$('#EmailBcc_input').val('');
$('#EmailSubject_input').val('');
$('#EmailBody_input').empty();
$('#EmailSignature_input').empty(),
$('#addEmailModal').modal('toggle');
}
});
});
Code Behind
public IActionResult OnPostEmailSend(string to, string cc, string bcc, string subject, string body, string signature, IList<IFormFile> attachments)
{
//Mail Request Model
MailRequest mailRequest = new MailRequest();
try
{
mailRequest.ToEmail = to;
mailRequest.Cc = cc;
mailRequest.BCC = bcc;
mailRequest.Subject = subject;
mailRequest.Signature = signature;
mailRequest.Body = body;
mailRequest.ReplyTo = User.Identity.Name;
mailRequest.From = _context.Employeetable.FirstOrDefault(x => x.EmpEmail == User.Identity.Name).FullName;
_mailService.SendEmailAsync(mailRequest);
}
catch (Exception ex)
{
throw ex;
}
return RedirectToPage("/Purchasing");
}