Profile Image in AspNet Identity - asp.net-mvc

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