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.
Validating file extension in AngularJs before uploading
Asked Answered
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)
I did not understand your question? What kind of practical use you want from a file name and extenssion? –
Coinsure
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;
});
};
}
};
});
what is the use of
+ 1 –
Indelible @Indelible 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 –
Painless When I use this directive, validFile: true is always inside $pending... @Painless –
Protean
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
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 –
Inductance
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. –
Achene
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>
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.
Please remember to mark the answer you finded useful –
Irwinirwinn
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'.
© 2022 - 2024 — McMap. All rights reserved.
.xlsxFor the question, the answer is right, but not practically useful – Lauderdale