How to determine the type of uploaded file in angularJS

Question

I have a form to upload only an image file using angularJS. File upload is working fine. The problem is that I want to limit the downloaded file only to the image file, as well as the image size so that it is some MB. How can I achieve this using only angularJS? Below is the code

$scope.uploadFile = function(files) { var fd = new FormData(); //Take the first selected file fd.append("file", files[0]); $http.post("logoTypesServiceStore", fd, { withCredentials: true, headers: {'Content-Type': undefined }, transformRequest: angular.identity }).success( function(data) {alert(data); }).error( function(data) { alert(data)}); }; 

Below is the form to download the file.

  <form name="logoTypeForm" novalidate> <input type="text" name="logoType" ng-model="logoType" class="form-control" required /> <input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)"/> </form> 

Answer 1

Modern browsers have API file support .

 $scope.uploadFile = function(files) { files[0].type; //MIME type files[0].size; //File size in bytes }; 

Here is a list of MIME type images

Answer 2

I would recommend already specifying the files that you would like to use in the input tag, for example:

 <input type="file" name="files" accept="image/*"> 

For more information, check out the W3Schools link for the input tag.