I am uploading images for our application to the server. Is there any way to validate the extensions in client side by JS before submitting them to the server before uploading them to server?
I am using AngularJs to handle my front-end.
Add a comment
|
6 Answers
You can use this simple javascript to validate. This code should be put inside a directive and on change of file upload control.
var extn = filename.split(".").pop();
Alternatively you can use javascript substring method also:
fileName.substr(fileName.lastIndexOf('.')+1)
2 Comments
Adarsh Mohan
extensions can be easily manipulated. Eg: create an image (say png) then change the extension to .xlsx. the image gets uploaded to server as
.xlsx For the question, the answer is right, but not practically useful
Sanjeev Singh
I did not understand your question? What kind of practical use you want from a file name and extenssion?
You can create a angular directive, something like this should work (Change the accepted values in the validFormats array);
HTML:
<form name='fileForm' >
<input type="file" name="file" ng-model="fileForm.file" validfile>
</form>
Javascript:
angular.module('appname').directive('validfile', function validFile() {
var validFormats = ['jpg', 'gif'];
return {
require: 'ngModel',
link: function (scope, elem, attrs, ctrl) {
ctrl.$validators.validFile = function() {
elem.on('change', function () {
var value = elem.val(),
ext = value.substring(value.lastIndexOf('.') + 1).toLowerCase();
return validFormats.indexOf(ext) !== -1;
});
};
}
};
});
3 Comments
runningmark
what is the use of
+ 1
ecarrizo
@runningmark It get the last match with a dot. And sum 1 to that value in order to remove the dot of the output. In the example above, if your file is named after 'someFile.someweirdname.rar" you will get "rar" as
ext value
Marko Mikulić
When I use this directive, validFile: true is always inside $pending... @ecarrizo
for file validation i.e required,file extension,size.Create custom directive and used angular js ng-message module for simplify the validation errors
HTML
<input type="file" ng-model="imageFile" name="imageFile" valid-file required>
<div ng-messages="{FORMNAME}.imageFile.$error" ng-if="{FORMNAME}.imageFile.$touched">
<p ng-message="required">This field is required</p>
<p ng-message="extension">Invalid Image</p>
</div>
Angular JS
customApp.directive('validFile', function () {
return {
require: 'ngModel',
link: function (scope, elem, attrs, ngModel) {
var validFormats = ['jpg','jpeg','png'];
elem.bind('change', function () {
validImage(false);
scope.$apply(function () {
ngModel.$render();
});
});
ngModel.$render = function () {
ngModel.$setViewValue(elem.val());
};
function validImage(bool) {
ngModel.$setValidity('extension', bool);
}
ngModel.$parsers.push(function(value) {
var ext = value.substr(value.lastIndexOf('.')+1);
if(ext=='') return;
if(validFormats.indexOf(ext) == -1){
return value;
}
validImage(true);
return value;
});
}
};
});
Require angular-messages.min.js
2 Comments
Vishal
It is working fine for validating that if a file is jpg, jpeg or png. But when nothing is selected I get a parse error as below: Please add error message for parse. For more details look this image: i66.tinypic.com/2ykz6t1.jpg
Shilpi Jaiswal
Extension validation is working for me with same code, but required is not working, though its showing parse error. Can anyone Provide any changes required in this to acquire same.
Here is the complete code for validating file extension usign AngularJs
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type='text/javascript'>
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.setFile = function(element) {
$scope.$apply(function($scope) {
$scope.theFile = element.files[0];
$scope.FileMessage = '';
var filename = $scope.theFile.name;
console.log(filename.length)
var index = filename.lastIndexOf(".");
var strsubstring = filename.substring(index, filename.length);
if (strsubstring == '.pdf' || strsubstring == '.doc' || strsubstring == '.xls' || strsubstring == '.png' || strsubstring == '.jpeg' || strsubstring == '.png' || strsubstring == '.gif')
{
console.log('File Uploaded sucessfully');
}
else {
$scope.theFile = '';
$scope.FileMessage = 'please upload correct File Name, File extension should be .pdf, .doc or .xls';
}
});
};
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<input type="file"
onchange="angular.element(this).scope().setFile(this)">
{{theFile.name}}
{{FileMessage}}
</div>
</body>
</html>
Comments
You can add a custom directive which checks for the element.files array in order to check the type on the onchange event.
There is no embedded validation for file input.
1 Comment
Matias Fernandez Martinez
Please remember to mark the answer you finded useful
There are many modules that can help you with this. Any one of these should allow you to define a filter to only upload certain file extensions.
If you're looking for a simpler solution, you can use something like string.js to ensure the filenames of the files being uploaded are of extension '.png'.
