MVC4 Retrieveing image file from SQL Server table to html image

Question

I trying to create user profile page on MVC4 web application.

On the userprofile page there is an image <img /> tag to display profile photo. Just below the image, there are "browse", "upload" buttons for the user to browse and upload photo. On clicking upload button, it should upload the photo to SQL Server and show the image on the profile page.

I am able to upload photo and gets saved to SQL Server table. Now I want to retrieve the photo from SQL Server table to the profile page.

Here is my User profile page /.cshtml page (razor view )

@model MvcSamples.Models.UserPicModel

@{

    ViewBag.Title = "PersonalInfo";
}

<h2>PersonalInfo</h2>

<form action="/UserDetails/PersonalInfo"  method="post" enctype="multipart/form-data">
        <img src="" alt="ProfilePhoto" />
    <label for="photo">Photo:</label>
    <input type="file" name="photo" id="photo" />
    <input type="submit" value="Upload" />

</form>

This is the code I am using to retrieve photo back from the SQL Server table. Note that the photo is retrieved from db as byte[]

byte[] barrImg = usr.GetProfilePhoto(id);

When I debug, I can see the photo is retrieved to "barImg".

My question 1 : from here how can I get this to <img src="" alt="ProfilePhoto" /> so that it will show up the actual photo on the profile page?

Question 2: can someone suggest any better alternatives suggestions /samples/pointers to achieve the same functionality involving Jquery/Ajax /javascript

Thank you in advance

Satpal · Accepted Answer · 2013-07-09 05:24:23Z

3

You can use FileResult, to send binary data to response.

public FileResult GetProfileImage(int id)
{
    var usr = new Whatever();
    byte[] barrImg = usr.GetProfilePhoto(id);
    return File(barrImg, "image/png");
}

You can use it as,

 <img src="@Url.Action("GetProfileImage", "Controller", new { id = 5})"

edited Jul 9, 2013 at 5:24

answered Jul 9, 2013 at 5:18

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

MVC4 Retrieveing image file from SQL Server table to html image

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related