MVC 4 Add Profile Image to RegisterModel

Question

How do you add the option to upload a profile image to the default RegisterModel in MVC 4?

Answer 1

This answer converts the image to a byte array so that you can then save it in a database. It can easily be modified if you wanted to save the image to file store.

The code for the View Model. The important part is the multipart/form-data attribute:

 @using (Html.BeginForm("Register", "Account", null, FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary()

        <fieldset>
            <legend>Registration Form</legend>
            <ol>
                <li>
                    @Html.LabelFor(m => m.UserName)
                    @Html.TextBoxFor(m => m.UserName)
                </li>
                <li>
                    @Html.LabelFor(m => m.Password)
                    @Html.PasswordFor(m => m.Password)
                </li>
                <li>
                    @Html.LabelFor(m => m.ConfirmPassword)
                    @Html.PasswordFor(m => m.ConfirmPassword)
                </li>
                <li>
                    <label for="register-avatar">Upload your photo</label>
                    <input id="register-avatar"  type="file" name="ProfileImage" />
                </li>
            </ol>
            <input type="submit" value="Register" />
        </fieldset>
    }

The RegisterModel:

public class RegisterModel
{
    [Required]
    [Display(Name = "User name")]
    public string UserName { get; set; }

    [Required]
    [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }

    [DataType(DataType.Password)]
    [Display(Name = "Confirm password")]
    [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
    public string ConfirmPassword { get; set; }

    public HttpPostedFileBase ProfileImage { get; set; }

}

The AccountController's HTTPPost for the Register.cshtml View:

[HttpPost]
    [AllowAnonymous]
    [ValidateAntiForgeryToken]
    public ActionResult Register(RegisterModel model)
    {

        if (ModelState.IsValid)
        {
            // Attempt to register the user
            try
            {
                WebSecurity.CreateUserAndAccount(model.UserName, model.Password);
                WebSecurity.Login(model.UserName, model.Password);

                MemoryStream target = new MemoryStream();
                model.ProfileImage.InputStream.CopyTo(target);
                byte[] data = target.ToArray();

                var profileImage = new ProfileImage();
                profileImage.Data = data;
                profileImage.MimeType = model.ProfileImage.ContentType;

                /// other code to save the image to the database

                return RedirectToAction("Index", "Profile/" + model.UserName);
            }
            catch (MembershipCreateUserException e)
            {
                ModelState.AddModelError("", ErrorCodeToString(e.StatusCode));
            }
        }

        // If we got this far, something failed, redisplay form
        return View(model);
    }

This is a quick run down of how I managed to upload a profile image along with the registration built into the MVC 4 template.