In this article I will explain with an example, how to get MIME Type (Content Type) of a File in AngularJS.
 
 
Determining MIME Type (Content Type) of a File in AngularJS
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
The HTML DIV consists of an HTML FileUpload element (Input Type File) which has been assigned a JavaScript OnChange event handler.
Since there is no binding support for FileUpload element (Input Type File) in AngularJS, the method inside the Controller is invoked using the JavaScript OnChange event handler.
Note: If you want to learn more on using ng-change event with FileUpload in AngularJS, please refer my article Using ng-change with FileUpload (Input Type File) in AngularJS.
 
Inside the GetMIME function, the MIME Type (Content Type) of the selected File is displayed using JavaScript Alert Message Box.
Note: If you want to learn more on displaying JavaScript alert with AngularJS, please refer my article AngularJS: Display (Show) JavaScript Alert box.
 
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $window) {
            $scope.GetMIME = function (e) {
                $window.alert(e.target.files[0].type);
            };
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <input type="file" onchange="angular.element(this).scope().GetMIME(event)" />
    </div>
</body>
</html>
 
 

Screenshot
Get MIME Type (Content Type) of a File in 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.

 
 
Demo
 
 
Downloads