Add a picture in a dotnet core model

Question

I have a dotnet core (+razor +ef) application with the usual model of a Product :-)

A product should have a picture associated, uploaded from the Products\Create.cshtml and Products\Edit.cshtml pages, stored in a table of the DB, and showed in the Products\Details.cshtml.

My model is something like this:

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public decimal Price { get; set; }
    public byte[] Image { get; set; }
}

First question: is it correct the use of byte[] for the picture?

Second question: since I guess I cannot automatically scaffolding the CRUD pages for a picture, how can I upload the image from the razor Create.cshtml page?

Thanks a lot

This seems a little like a homework question. Can you tell us what you have tried so far? Take a look at [How to Ask](https://stackoverflow.com/help/how-to-ask) for a few pointers. — Jamie Taylor, Apr 30 '19 at 14:53
It's not a homework, really. I have 20+ years of experience in professional programming (and with SO too :-). Unfortunately, I'm pretty new with .net technology, and the dotnet core documentation sucks :-) I've tried, but I couldn't really find help online about moving pictures from html page to DB and viceversa. — Daniele Pallastrelli, Apr 30 '19 at 15:00
@DanielePallastrelli, you can [use this to upload file in .Net Core](https://stackoverflow.com/q/35379309/3394380) and store just file path in database instead of `byte[]` — yW0K5o, Apr 30 '19 at 15:06
@yW0K5o unfortunately, I have to store the whole image into a table of the DB. It's a constraint of my application because another app will use the same DB to retrieve the pictures. — Daniele Pallastrelli, Apr 30 '19 at 15:10
@DanielePallastrelli, [read this to save picture in database](https://stackoverflow.com/a/5613926/3394380) and use my previous link how to upload file in .Net Core. — yW0K5o, Apr 30 '19 at 15:15

Dmitry Pavlov · Answer 1 · 2019-05-02T18:49:09.327

In your View you can

1) Either go with embedded image bytes:

<img src="data:image/jpeg;base64,@Convert.ToBase64String(Model.Image)" />

2) Or - use the separate controller action like GetImage below, which returns the file:

<img src="@Url.Action("GetImage", new { productId = Model.Id })" />

In this case you will need an additional controller action like this:

[HttpGet] 
public FileStreamResult GetImage(Guid productId) 
{ 
    using (var dbContext = new DbContext()) 
    { 
        var product = dbContext.Product.FirstOrDefault(x => x.Id == productId); 
        var ms = new MemoryStream(product.Image); 
        return new FileStreamResult(ms, "image/jpeg"); 
    } 
}

NOTE: if the images are not too big, storing them in DB might be OK. If not - I would suggest to consider storing them on file system (or in cloud storage) with metadata (like file name, etc.) in your database. But that is a different story for sure.

Add a picture in a dotnet core model

1 Answers1