Get Image(Binary Data) from database with .Net Core and Angular 8

Question

I have images stored in database as Binary Data ,I wanna return this image for client to display them but the problem is code that I've written return json data not the image, how could i return the image as its for the client in .NET Core 3.1 with Angular 8

//note document is the column of my image Here is my code :

public async Task<dynamic> GetImage(int id)
        {

            string imageBase64Data =Convert.ToBase64String(_repository.Get(id).document);
            string imageDataURL =string.Format("data:image/jpg;base64,{0}",imageBase64Data);
           
            return imageDataURL;
        }

I'm using ABP framework and my class is ApplicationService Base Class

I can't return file because my class is ApplicationService Class not a Controller , what I can return is FileStreamResult — Abdulaziz, Jul 11 '20 at 09:55

Edgars Pivovarenoks · Answer 1 · 2020-07-17T10:49:34.423

So far my impression is that APB dynamic Api controllers generated for ApplicationService has no convention to build Api actions returning FileStreamResult-s.

So for downloading files from APB based Api I would manually create Controller for this purpose, inject required service that would return either Stream or byte[] array.

[Route("api/[controller]/[action]")]
public class ImageController: AbpController
{    
    private readonly IImageStore _imageStore;

    public ImageController(IImageStore imageStore)
    {
        _imageStore = imageStore;
    }

    [HttpGet]
    [FileResultContentType("image/jpeg")]
    public async Task<FileStreamResult> GetImageStream(string imageId)
    {
        Stream imageStream = await _imageStore.GetImage(imageId);
        imageStream.Seek(0, SeekOrigin.Begin);
        
        var contentDisposition = new ContentDispositionHeaderValue("attachment");
        contentDisposition.SetHttpFileName($"{imageId}.jpg");
        Response.Headers.Add(HeaderNames.ContentDisposition, contentDisposition.ToString());
        
        return new FileStreamResult(imageStream, "image/jpeg");
    }
}

Please note one important attribute to make it work well with nswag FileResultContentType. For more information refer to this post :

What is the correct way to download a file via the NSwag Code Generator (angular 2 typescript)

Thank you but I think the answer that I've posted much simpler anyway thank you again for this different approach. — Abdulaziz, Jul 14 '20 at 11:20
Please note that Abp also promotes loose coupling. In your solution, if you put this method in ApplicationService, would mean that your business logic is coupled to Mvc framework. — Edgars Pivovarenoks, Jul 14 '20 at 12:24

score 0 · Accepted Answer · answered Jul 13 '20 at 13:26

I found it from Server Side (.Net Core ) I've used FileStreamResult this will return a link that enable you to donwload the file or you can use FileContentResult to return the file directly

//myImage.document is a byte[]
public async Task<FileStreamResult> GetDoc(int id)
 {
            var myImage = await _repository.GetAsync(id);
            var stream = new MemoryStream(myImage.document);
            
            return new FileStreamResult(stream, "image/jpeg" /*chnage this based on your image type */ )
            {
                FileDownloadName = "test.jpeg"
            };
           
        }

Get Image(Binary Data) from database with .Net Core and Angular 8

2 Answers2