1

I have a form where a user can change his profile picture with the following property in my viewmodel:

public HttpPostedFileBase Image { get; set; }

This works great for the upload but how can I also display his picture?

Do I have to create another property like this?

public HttpPostedFileBase UploadedImage { get; set; }
public byte[] Image { get; set; }

It looks wrong, is there a way to do this with 1 property?

thank you

Marc
  • 16,170
  • 20
  • 76
  • 119

4 Answers4

3

The solution depends on how you are saving your image. In case your are serializing it into byte[], you can do the following to load the image in the View:

Create a function in your controller:

public void GetImageThumbnailFromByteArray(Guid? profileId)
        {   

            Profile profile = // Get profile by profileId
            Byte[] image = profile.Image;

            new WebImage(image).Write();

        }

In the View:

  <img src="@Url.Action("GetImageThumbnailFromByteArray", "Profile", new { profileId = Model.ProfileId})" />
csoueidi
  • 408
  • 1
  • 5
  • 15
  • I have already something like this but instead of calling a method after, I would like the image in my viewmodel. Is it possible – Marc May 19 '14 at 14:39
  • Can you explain to me, why would you need to do that ? – csoueidi May 19 '14 at 15:05
  • I'm actually doing it like that and I thought that it was wrong. It feels wrong to do 2 calls to the API to get the information then the picture – Marc May 19 '14 at 15:15
  • see my answer if you want to show it from the ViewModel (Model) – Daniel Björk May 19 '14 at 15:20
3

User Class

public class ApplicationUser : IdentityUser
{
    public string Email { get; set; }
    public byte[] Picture { get; set; }
}

View Image:

[HttpGet]
[AllowAnonymous]
public ActionResult ViewImage(string id)
{
    ApplicationUser user = m_DAL.Find<ApplicationUser>(x => x.UserName == User.Identity.Name);

    byte[] buffer = user.Picture;
    return File(buffer, "image/jpg", string.Format("{0}.jpg", user.UserName));
}

Razor:

<img src="/user/viewimage/aaa">

or if you would like it in the ViewModel:

@Html.Raw("<img src=\"data:image/jpeg;base64," + Convert.ToBase64String(Model.Picture) + "\" class=\"img-thumbnail\" style=\"width: 100px; height: 100px; margin-bottom: 20px;\" />")
LatentDenis
  • 2,839
  • 12
  • 48
  • 99
Daniel Björk
  • 2,475
  • 1
  • 19
  • 26
  • Caution with this! This is of course functional, but from performance reasons not recommended. This way your application must serve all images bytestreams, which consumes your app resources (request thread pool, memory, handles, etc.). Static file serving should be left to web server itself - by providing URL to the client. This enables caching on client too, which is very important. – rouen May 20 '14 at 06:30
1

You would typically save the image to a directory on the server (or perhaps a database) and then simply provide a URL that can be used to render the image rather than send a byte array to HTML.

BenjaminPaul
  • 2,931
  • 19
  • 18
  • If I save it to a database how does it work because there's no URL. I have another form where I have a img that its src is a controller action method that returns a `File(myImgByteArray, "image/jpg");`. How would it work with a viewmodel? – Marc May 19 '14 at 14:04
  • I think I will change my database to store URLs like you said. – Marc May 19 '14 at 15:50
1

You dont want to use HttpPostedFileBase in viewmodel for displaying file, this is wrapper around part of the HTTP request. Your question is already answered nicely here :

Uploading/Displaying Images in MVC 4

or here

Upload Image in form and show it on MVC 4

Community
  • 1
  • 1
rouen
  • 5,003
  • 2
  • 25
  • 48