Reading BLOB file on AngularJs

Question

I am really lost on this situation, so I'm accepting any sugestions.

Some facts:

What needs to be done: Download and upload of files, and in case of a JPG file, the client must be able to visualize it on browser.

This BLOB file can be anything, as far as I know, JPG, DOC, PDF...

I have those existing blob files stored in my DB, and I have to read it on my website, which is AngularJs App.

My Server-side is a Web Api with Entity Framework.

So far, I've achieved to send a byte[] to Angular App. But it is shown as a bunch of strange characters, such as �. And here, I'm already lost.

On my C# class, I said the var that will recieve the BLOB file is a byte[]. Is that even correct?

I believe that I have encoding issues, since I can't read it on HTML. I've been told the DB is on UTF-16. I believe that Angular is waiting it on UTF-8 (how can I confirm this or configurate it?). But I've never had this encoding issue with any other data, but of course, they weren't BLOB files.

My C# code to return BLOB data:

[HttpGet]
    [Route("Download/{documentId}")]
    public HttpResponseMessage Documents(int documentId)
    {
        var document = _unit.Document.Get(documentId);



        var response = new HttpResponseMessage(HttpStatusCode.OK);
        response.Content = new ByteArrayContent(document.BlobFile);
        response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
        response.Content.Headers.ContentDisposition.FileName = document.Name;

        return response;
    }

My Angular Code, recieving the data:

$scope.download = function (documentId) {
            $http.get('Api/Documents/Download/' + documentId)
                .then(function (response) {
                    console.log(response);
                    $scope.test = response.data
                })
        }

On HTML, I'm trying to read it like this, assuming it is an image (don't know if it is the right way), the only case that I need to read it on browser, for every other I just need to make it downloadable (which I don't know how to yet, but one problem at a time):

<img ng-src="data:image/jpeg;base64,{{teste}}" id="photo-id" />

As I said before, I'm really lost and accepting sugestions, and I couldn't find any example that could help me so far.

Thanks in advance!

Feras Al Sous · Accepted Answer · 2017-05-07 13:54:40Z

3

The C# code:

[HttpPost]
public string GetCalculatorResults()
{

    byte[] imgArr = GetImageFromDataBase();

    // Here we are converting the byte array to Base64String
    return Convert.ToBase64String(imgArr)
}

The HTML and AngularJS Source Code Should be

<div ng-app="myApp" ng-controller="myCtrl">

    <img ng-src="data:image/jpeg;base64,{{ imageSrc  }}" />

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $scope.imageSrc = "";
    $http.get("someurl")
    .then(function(response) {
        $scope.imageSrc = response.data;
    });
});
</script>

I tested the above code, its working.

answered May 7, 2017 at 13:54

Feras Al Sous

1,0811 gold badge12 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Guilherme Over a year ago

Well, I ended up finding the solution, and it is pretty much like this. Thanks anyway, this might help someone.

Norbert Norbertson Over a year ago

Your C# code has a [httPost] attribute but you are calling it with $http.get. Is that an error?

Collectives™ on Stack Overflow

Reading BLOB file on AngularJs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related