ASP.NET Core MVC, Get file from database, and render as image

Question

I have image data being stored in a SQL table with a field type of varbinary(max) I also store the image content type.

Using Microsoft ASP.NET Core MVC and Dapper, I am trying to get the file back from the database and render it as an image.

This is my FileModel:

using System;

namespace Brand.Models
{
    public class FileModel
    {
        public Guid ID { get; set; }
        public string FileName { get; set; }
        public string FileType { get; set; }
        public byte[] FileData { get; set; }
        public int FileLength { get; set; }
        public long Version { get; set; }
        public string FileSource { get; set; }
        public DateTime Created { get; set; }

        public FileModel() 
        {
            FileLength = 0;
            Version = 1;
            Created = DateTime.Now;
        }
    }
}

These are my functions:

public FileStreamResult GetFile(string FileID)
{
    return GetFile(new Guid(FileID));
}

public FileStreamResult GetFile(Guid FileID)
{
    using (SqlConnection connection = new SqlConnection(connectionString))
    {
        connection.Open();
        DynamicParameters dynamicParameters = new DynamicParameters();
        dynamicParameters.Add(@"ID", FileID);
        FileModel result = connection.Query<FileModel>("GetFile", dynamicParameters, commandType: CommandType.StoredProcedure).FirstOrDefault();
        Stream stream = new MemoryStream(result.FileData);
        return new FileStreamResult(stream, result.FileType);
    }
}

I call this with this kind of syntax:

<img src="@fileExtensions.GetFile(content.FileID)" />

I am getting a 404 response when I try this, so obviously something is wrong with the way I am implementing this.

Solution 1

The below code is just off the top of my head, so it might need some tweaks, but it will give you the basic idea.

Create a new controller and put your methods in there:

public ImageController : Controller
{
    public FileStreamResult GetFile(string FileID)
    {
        return GetFile(new Guid(FileID));
    }

    public FileStreamResult GetFile(Guid FileID)
    {
        using (SqlConnection connection = new SqlConnection(connectionString))
        {
            connection.Open();
            DynamicParameters dynamicParameters = new DynamicParameters();
            dynamicParameters.Add(@"ID", FileID);
            FileModel result = connection.Query<FileModel>("GetFile", dynamicParameters, commandType: CommandType.StoredProcedure).FirstOrDefault();
            Stream stream = new MemoryStream(result.FileData);
            return new FileStreamResult(stream, result.FileType);
        }
    }
}

then in your markup, reference the controller:

<img src="@Url.Action("GetFile", "Image", new {FileId = content.FileID})" />

Solution 2

As @fileExtensions.GetFile(content.FileID) actually returns an FileStreamResult it wouldn't be able to render it inside html and probably just returns FileStreamResult.ToString().

Check rendered html!

Instead what you would do is a function that renders an url that triggers an action on an controller which returns the FileStreamResult.

Another alternative is to embed the image if that is what you want.

<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />

Then you have to encode your image like in this post: Convert image path to base64 string but use your memory stream instead of reading from filepath.