How to upload a file to be an attachment in an email?

Question

I have a form but the user's data is not stored anywhere, just sent in an email. Does anyone know of an easy way to allow the user to attach a file?

As of now, when the user clicks submit, jquery collects the data and sends it to 'AjaxController.cs'. (A form element is not used)

HTML

<div class="form">
    <input type="text" name="Name">
    <input type="file" name="File">
    <button>Submit</button>
</div>

JS

$(document).ready(function(){
    $('button').click(function(){
        var data = {};
        $('input').each(function(){
            data[this.name] = this.value;
        }
        $.post('/Ajax/Email', data, function(){
            alert("Email Sent");
        });
    });
}

C#

public class AjaxController : Controller
{
    public ActionResult Email()
    {
        MailMessage message = new MailMessage("from@fake.com","marketing@fake.com");

        foreach (string form_inputs in Request.Form.Keys)
        {
            String  input_name  =   form_inputs.ToString();
            String  input_value =   Request.Form[form_inputs].Trim();
            if(input_name == "File")
            {
                System.Net.Mail.Attachment attachment;
                attachment = new System.Net.Mail.Attachment(input_value); //ERROR
                message.Attachments.Add(attachment);
            }
            if (input_name == "Name")
            {
                message.Body = "Name: " + input_value;
            }
        }
        SmtpClient client = new SmtpClient();
        client.Port = 25;
        client.DeliveryMethod = System.Net.Mail.SmtpDeliveryMethod.Network;
        client.UseDefaultCredentials = false;
        client.Host = "SMTP.fake.com";

        client.Send(message);
    }
}

/Ajax/Email simply returns 'Mail Sent!"

I'm getting an error that basically says the uploaded file does not exist locally - of course - because it hasn't been uploaded. Where does the file exist at this point, how do I access it?

Answer 1

Files uploaded in MVC are in the Request collection as an HttpPostedFileBase type. You can use this to get a stream instance of the file in memory on the server and attach it directly to the e-mail. When using a FORM tag, you must set the the enctype="multipart/form-data" in your form.

In your controller:

public class AjaxController : Controller
{
    public ActionResult Email()
    {
        MailMessage message = new MailMessage("from@fake.com","marketing@fake.com");

        foreach (string form_inputs in Request.Form.Keys)
        {
            String  input_name  =   form_inputs.ToString();
            String  input_value =   Request.Form[form_inputs].Trim();
            if(input_name == "File")
            {            
                HttpPostedFileBase file = Request.Files[input_name];
                System.Net.Mail.Attachment attachment;
                attachment = new System.Net.Mail.Attachment(file.InputStream, file.FileName); //ERROR
                message.Attachments.Add(attachment);
            }
            if (input_name == "Name")
            {
                message.Body = "Name: " + input_value;
            }
        }
        SmtpClient client = new SmtpClient();
        client.Port = 25;
        client.DeliveryMethod = System.Net.Mail.SmtpDeliveryMethod.Network;
        client.UseDefaultCredentials = false;
        client.Host = "SMTP.fake.com";

        client.Send(message);
    }
}

I also feel compelled to mention the fact that this could be VERY insecure (dangerous) depending on how you're planning to implement this. Please be sure to perform some verification on the file prior to sending it (in memory Virus scan / content type restrictions, etc...).

---

Because you're using Ajax (which the POST method uses under the covers), you'll have some additional challenges. Up until recently, Ajax file uploads had to be done with an iframe hack. With modern browsers that support XHR2, it can be done only using the FormData object in JavaScript. Luckily, these factors won't affect the server-side code. See this Question for more detail on this: jQuery Ajax File Upload

For more on using FormData, see here: Sending multipart/formdata with jQuery.ajax

Here is an in-depth article discussing ajax form uploads: http://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax