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.
Inside the GetMIME function, the MIME Type (Content Type) of the selected File is displayed using JavaScript Alert Message 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
