Form with attachments upload and email sending

Question

I need to make form with a textarea and an image upload field. When somebody submit it I want it to send email (with text from textarea) with attachements (from input file upload field) to me.

My simple form looks like that:

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>        
            @Html.TextArea("Question");      
            <input type="file"/> 
            <input type="submit" value="Send" />

    </fieldset>

}

I found PHP scripts that are doing something like that, but how could I do it in ASP.NET MVC (could be with JavaScript)?

Darin Dimitrov Darin Dimitrov · Accepted Answer · 2011-06-08T16:37:25

Here's an example using gmail's SMTP but if you have your own SMTP server you could easily adapt the code.

As always I would start with a view model:

public class QuestionViewModel
{
    [Required]
    public string Question { get; set; }

    public HttpPostedFileBase Attachment { get; set; }
}

then a controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new QuestionViewModel());
    }

    [HttpPost]
    public ActionResult Index(QuestionViewModel model)
    {
        if (!ModelState.IsValid)
        {
            return View(model);
        }

        using (var client = new SmtpClient("smtp.gmail.com", 587))
        {
            client.EnableSsl = true;
            client.Credentials = new NetworkCredential("[email protected]", "secret");
            var mail = new MailMessage();
            mail.From = new MailAddress("[email protected]");
            mail.To.Add("[email protected]");
            mail.Subject = "Test mail";
            mail.Body = model.Question;
            if (model.Attachment != null && model.Attachment.ContentLength > 0)
            {
                var attachment = new Attachment(model.Attachment.InputStream, model.Attachment.FileName);
                mail.Attachments.Add(attachment);
            }
            client.Send(mail);
        }
        return Content("email sent", "text/plain");
    }
}

and finally a view:

@model QuestionViewModel

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.ValidationSummary(true)
    <fieldset>        
        <div>
            @Html.LabelFor(x => x.Question)
            @Html.TextAreaFor(x => x.Question)
        </div>
        <div>
            <label for="attachment">Attachment</label>
            <input type="file" name="attachment" id="attachment"/> 
        </div>
        <input type="submit" value="Send" />
    </fieldset>
}

A further improvement to this code would be to externalize the actual sending of the mail into a repository implementing some interface and using DI in order to weaken the coupling between the controller logic and the mail sending logic.

Note that you can also configure your SMTP settings in web.config:

<system.net>
    <mailSettings>
      <smtp from="[email protected]" deliveryMethod="Network">
        <network 
          enableSsl="true" 
          host="smtp.gmail.com" 
          port="587" 
          userName="[email protected]" 
          password="secret" 
        />
      </smtp>
    </mailSettings>
</system.net>

and then simply:

using (var client = new SmtpClient())
{
    var mail = new MailMessage();
    mail.To.Add("[email protected]");
    mail.Subject = "Test mail";
    mail.Body = model.Question;
    if (model.Attachment != null && model.Attachment.ContentLength > 0)
    {
        var attachment = new Attachment(model.Attachment.InputStream, model.Attachment.FileName);
        mail.Attachments.Add(attachment);
    }
    client.Send(mail);
}

Form with attachments upload and email sending

4 Answers