In this article I will explain with an example, how to display BLOB as Image using AngularJS ng-src directive in ASP.Net MVC Razor.
This article will illustrate how to upload and send files to Web API using AngularJS $http service and HTML5 FormData and then convert the Image to BLOB format and display as Image using AngularJS ng-src directive in ASP.Net MVC Razor.
Note: For beginners in Web API, please refer my article Step by Step Web API Tutorial for Beginners in ASP.Net MVC.
 
 
Namespaces
You will need to import the following namespaces.
using System.IO;
using System.Net;
using System.Net.Http;
using System.Web;
using System.Web.Http;
 
 
Controller
The Controller consists of the following Action method.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
}
 
 
Web API Controller
In order to add a Web API Controller, you will need to Right Click the Controllers folder in the Solution Explorer and click on Add and then Controller.
Now from the Add Scaffold window, choose the Web API 2 Controller – Empty option as shown below.
Display BLOB as Image using AngularJS
 
Then give it a suitable name and click Add.
Display BLOB as Image using AngularJS
 
The next task is to register the Configuration for Web API in the Global.asax file so that the Web API is available for accessing on Web.
In order to do so open Global.asax file and add the following line.
System.Web.Http.GlobalConfiguration.Configure(WebApiConfig.Register);
 
Make sure you add it in the same order as shown below.
public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        AreaRegistration.RegisterAllAreas();
        System.Web.Http.GlobalConfiguration.Configure(WebApiConfig.Register);
        RouteConfig.RegisterRoutes(RouteTable.Routes);
    }
}
 
The next step is to code the Web API Controller.
The Web API Controller consists of the following Action method.
Action method for uploading the Files
Inside this Action method, first the File is read from the Request.Files collection and it is converted into Byte Array format using the ReadBytes method of the BinaryReader class.
Finally, the Byte Array content is converted into a BASE64 string and is sent to the Client.
public class FileAPIController : ApiController
{
    [Route("api/FileAPI/UploadFiles")]
    [HttpPost]
    public HttpResponseMessage UploadFiles()
    {
        //Read the File from Request.Files collection.
        HttpPostedFile postedFile = HttpContext.Current.Request.Files[0];
 
        //Convert the File to Byte Array.
        BinaryReader br = new BinaryReader(postedFile.InputStream);
        byte[] bytes = br.ReadBytes(postedFile.ContentLength);
 
 
        //Send the Base64 string to the Client.
        return Request.CreateResponse(HttpStatusCode.OK, Convert.ToBase64String(bytes, 0, bytes.Length));
    }
}
 
 
View
The View consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
 
The HTML DIV consists of an HTML FileUpload element and a Button. Below the Form there’s an HTML5 Progress element for displaying the progress of the uploading File.
The Upload Button has been assigned ng-click directive. When the Button is clicked, the UploadFile function of the Controller gets called.
Note: If you want to learn more about ng-click directive, please refer my article ng-click directive example. 
 
Inside the UploadFile function, the File is read from the HTML FileUpload element and added to an HTML5 FormData JavaScript object and then the File is uploaded using $http service.
A Progress event handler is attached to the $http service, which displays the progress of the File being uploaded using the HTML5 Progress element.
Finally, the received BASE64 string is assigned to a Model variable.
The Model variable is assigned to the ng-src directive which displays the Image in the HTML Image element.
The Image element is also assigned ng-show directive which shows the HTML Image element only when the Model variable is not NULL.
Note: If you want to learn more about using ng-show directive with condition, please refer my article AngularJS: Show using ng-show if Variable (Model) not NULL.
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $http, $window) {
            $scope.Base64 = null;
            var fileProgress = document.getElementById("fileProgress");
            var message = document.getElementById("lblMessage");
            $scope.UploadFile = function () {
                fileProgress.style.display = "block";
                var formData = new FormData();
                formData.append(file, document.getElementById("file").files[0]);
                var post = $http({
                    method: "POST",
                    url: "/api/FileAPI/UploadFiles",
                    data: formData,
                    transformRequest: angular.identity,
                    headers: {'Content-Type': undefined},
                    uploadEventHandlers: {
                        progress: function (e) {
                            if (e.lengthComputable) {
                                fileProgress.setAttribute("value", e.loaded);
                                fileProgress.setAttribute("max", e.total);
                            }
                        }
                    }
                });
                post.success(function (data, status) {
                    $scope.Base64 = data;
                    fileProgress.style.display = "none";
                });
 
                post.error(function (data, status) {
                    $window.alert(data.Message);
                });
            };
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <input id="file" type="file"/>
        <input type="button" value="Upload" ng-click="UploadFile()"/>
        <progress id="fileProgress" style="display: none"></progress>
        <hr/>
        <img ng-src="{{'data:image/png;base64,'+Base64}}" ng-show="Base64 != null"/>
    </div>
</body>
</html>
 
 
Screenshot
Display BLOB as Image using AngularJS
 
 
Browser Compatibility

The above code has been tested in the following browsers only in versions that support HTML5.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Downloads
Download Code