ASP.NET MVC : View stored image as byte[] from Db

Question

I have stored the image in a column of a table alongside with other information , but i have troble displaying the image when retrieving the whole information about the post. I am getting 'broken img' icon.

Model:

public class Event
{
[Key]
public int Id { get; set; }
public string EventName { get; set; }
public byte[] EventPhoto { get; set; }
}

Create Action:

    [Authorize]
    [HttpPost]
    public ActionResult Create(Event events, [Bind(Exclude = "EventPhoto")]EventController model)
    {
    if (ModelState.IsValid)
    {
        using (var database = new EventSpotDbContext())
        {
            byte[] imageData = null;
            if (Request.Files.Count > 0)
            {
                HttpPostedFileBase poImgFile = Request.Files["EventPhoto"];

                using (var binary = new BinaryReader(poImgFile.InputStream))
                {
                    imageData = binary.ReadBytes(poImgFile.ContentLength);
                }
            }
            events.EventPhoto = imageData;
            database.Events.Add(events);
            database.SaveChanges();
            return RedirectToAction("Main");
        }
    }
return View(events);
}

Input view:

     @Html.LabelFor(m => m.EventPhoto)
   <input type="file" name="Event" id="fileUpload" accept=".png,.jpg,.jpeg,.gif,.tif" />

Display Action:

  public ActionResult DisplayImg(Event events)
    {
        var bdEvents = HttpContext.GetOwinContext().Get<EventSpotDbContext>();
        var userImage = bdEvents.Users.Where(x => x.Id == (events.Id).ToString()).FirstOrDefault();
        return new FileContentResult(events.EventPhoto, "image/jpg");
    }

Display View:

<div class="container">
<article>

    <p> @Model.EventName </p>
    <img src="@Url.Action("DisplayImg", "Event" )" />

</article>

Any solution to my problem?

Your `@Url.Action("DisplayImg", "Event" )` does not pass any data to the `DisplayImg()` method and your `Event events` paremeter is just a default instance - the value of `EventPhoto` is `null`! But that method should never contain a parameter which is a model anyway - its needs to be (say) `int ID` where `ID` is the identifier of the `Event`, and you get the `Event` from the database. (and if you did try to pass the properties of `Event` to that method, it would certainly throw an exception because of the query string limit) — , Dec 18 '16 at 10:31
Did you bother to read the comment - your still not passing anything to the method! — , Dec 18 '16 at 21:52
sorry, it was a typo here in the post, but i had fixed this in the code, but still not working. is this how it needs to be : ? — ivanov.g94, Dec 18 '16 at 23:41
That does not pass anything to your method! - its `@Url.Action("DisplayImg, new { id = Model.Id })` — , Dec 18 '16 at 23:43
now I am displaying not an image, not a broken icon, but a /Event/DisplayImg/9 :D , there must be something else too — ivanov.g94, Dec 18 '16 at 23:57
And stop changing your original question (which just invalidates all the comments/answers). Append any new code you have tried — , Dec 19 '16 at 00:10

score 0 · Answer 1 · answered Dec 18 '16 at 10:07

Well for one thing your DisplayImg action expects an Event parameter, so try sending one. You're sending a string right now. Try this:

<img src="@Url.Action("DisplayImg", Model)" />

An even better solution is to just pass the ID of the event entry, by sending Model.Id and receiving an int that you use for the lookup.

However, the DisplayImg function you wrote is also off, you're using the Id property of the argument to look up the image, then you return the EventPhoto field instead. You should be returning the image you looked up.

That's as much as I can tell you without actual request/response data dumps. "Broken image" is about as useful a debugging aid as milk. Don't throw milk at your computer to fix bugs please.

I have edited my code and the post here, but the result is the same? Any other advice ? — ivanov.g94, Dec 18 '16 at 22:22

score 0 · Answer 2 · answered Dec 18 '16 at 10:10

0

Your <file> attribute is called Event but you're trying to access the file using Request.Files["EventPhoto"].

You should be using the name that you have specified for it within the view:

Request.Files["Event"]

answered Dec 18 '16 at 10:10

Luke

22,826
31
110
193

1

I think you will find that's just a typo from OP's [last question](http://stackoverflow.com/questions/41204031/uploading-image-as-part-of-a-form-asp-net-mvc) :) – Dec 18 '16 at 10:34
I think the OP needs to find an example for the use of `HttpPostedFileBase` too – Luke Dec 18 '16 at 10:40
Yes, I noted that they should be using a view model with a property for that in their previous question. – Dec 18 '16 at 10:42

ASP.NET MVC : View stored image as byte[] from Db

2 Answers2