Display image from mongodb gridfs to angularjs using webapi C#

See more:

MongoDB

C#6.0

WebAPI2

Angular5

Hi,

I am trying to display stored stream in mongodb GridFS as image in angularjs using webapi c#. I am using mongodb 2.4.4 in my project.
MongoDB Package : [^]

What I have tried:

I saved the stream from angular to mongodb using the below code.

using (var stream = await this.Request.Content.ReadAsStreamAsync())
{
var database = this.imageManager.GetDatabase(); // get database object
var gridFsInfo = database.GridFS.Upload(stream, "FileName"); 
objectId = gridFsInfo.Id.ToString();
stream.Close();
}
return this.Ok(objectId);

The above code inserted new documents in fs.files and fs.chunk.
Now i need to display the uploaded image from mongodb GridFS to angularjs.
I tried the below code. But the image is showing as corrupted image.

[HttpGet]
[Route("~/GetImageFromServer/{objectId}")]
public HttpResponseMessage GetImageFromMongo(string objectId)
{
var stream = this.GetImage(objectId);
HttpResponseMessage response = new HttpResponseMessage();
response.Content = stream;
response.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/octet-stream");
return response;
}

private StreamContent GetImage(string objectId)
{
var database = this.imageManager.GetDatabase();
var file = database.GridFS.FindOneById(new ObjectId(objectId));
var stream = file.OpenRead();
var bytes = new byte[stream.Length];
stream.Read(bytes, 0, (int)stream.Length);
return new StreamContent(stream);
}

Below line should display the image as background image

<div class="thumb-hov thumbnail-item" [ngStyle]="{'background-image': 'url(' + ImageURL+''+wb.ImageId+ ')'}">

Thanks in advance