Profile Image in AspNet Identity

Question

In my application I want to show user profile image in layout page (_LoginPartial).

In AspNet Identity membership their is a AspNerUser table . I want to customize this AspNerUser table to maintain image field.

then show that image in Layout page (_LoginPartial) view.

How can I do this ? Really appreciate can suggest a way to do this

EDIT

I generated my DataBaseContext name using ADO.NET entity model , database Context name is ProjectNameEntities

then I tried to enable migration using following command on PMC

Enable-Migrations -ContextTypeName myProject.Models.ProjectNameEntities

but then I'm getting following error

Creating a DbModelBuilder or writing the EDMX from a DbContext created using Database First or Model First is not supported. EDMX can only be obtained from a Code First DbContext created without using an existing DbCompiledModel.

is this possible to do with edmx model ?

Answer 1

Add Field Model (Code First)

First thing you need to do is modify the ApplicationUser Model that the database table is built from. This class is usually located in the IdentityModels.cs file. Add a new field to hold the image:

public class ApplicationUser : IdentityUser
{
   // maybe be other code in this model
    public byte[] ProfilePicture { get; set; }
}

Next you need to update your database to reflect the changes (assuming you are using Code First). You can find detailed information on the process in this article.

Enable-Migration
Add-Migration "Added user profile"
Update-Database (will apply any pending migrations to the database)

Return profile picture

Now add an action to a controller similar to:

public FileContentResult Photo(string userId)
{
    // get EF Database (maybe different way in your applicaiton)
    var db = HttpContext.GetOwinContext().Get<ApplicationDbContext>();

    // find the user. I am skipping validations and other checks.
    var user = db.Users.Where(x => x.Id == userId).FirstOrDefault();

    return new FileContentResult(user.ProfilePicture, "image/jpeg");
}

Finally in your _LoginPartial add the following call to the Action we just created where ever you want the image to show up. You will need to change the Controller name to what ever controller you put your action on.

<img src="@Url.Action("Photo", "Account" , new { UserId=User.Identity.GetUserId() })" />

Save profile picture

First you need to create a page to upload the image. Create an action to return the form:

[HttpGet]
public ActionResult Profile()
{
    ViewBag.Message = "Update your profile";
    return View();
}

The Razor view would be called Profile.cshtml and look have a form on it that looks like: (note that the Action and controller location may be different for you depending on how you structure your project)

@using (Html.BeginForm("Profile", "Manage", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()
    <fieldset>
        <legend>Photo</legend>
        <div class="editor-label">
            <label for="profile">FileName:</label>
        </div>
        <div class="editor-field">
             <input name="Profile" id="profile" type="file" />
        </div>
        <p>
        <input type="submit" value="Create" />
        </p>
     </fieldset>
}

The form will post back to an action so you need to create one that looks like:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Profile(HttpPostedFileBase Profile)
{
    // get EF Database (maybe different way in your applicaiton)
    var db = HttpContext.GetOwinContext().Get<ApplicationDbContext>();

    // find the user. I am skipping validations and other checks.
    var userid = User.Identity.GetUserId();
    var user = db.Users.Where(x => x.Id == userid).FirstOrDefault();

    // convert image stream to byte array
    byte[] image = new byte[Profile.ContentLength];
    Profile.InputStream.Read(image, 0, Convert.ToInt32(Profile.ContentLength));

    user.ProfilePicture = image;

    // save changes to database
    db.SaveChanges();

    return RedirectToAction("Index", "Home");
}

Note that there needs to be validations and checks put in place according to your rules but this is the basic idea on how it works.

Created a GitHub project that shows the basics above in a working sample: https://github.com/jsturtevant/mvc-aspnet-identity2-profile-picture-sample