Last active
August 13, 2020 04:39
-
-
Save thenikso/8899bc6b760e094dd2b5 to your computer and use it in GitHub Desktop.
AngularJS file input handling directive
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function () { | |
'use strict'; | |
angular.module('app.Components.InputTypeFile', []) | |
// When required, this module will automatically handle | |
// `ng-model` in file inputs. | |
// | |
// Usage: | |
// | |
// <input type="file" ng-model="myModel" accept="image/*" multiple maxsize="100000"> | |
// | |
// Options: | |
// - `multiple` (optional) if specified, the ng-model will be an array of the selected files | |
// otherwise it will be a single file; | |
// - `accept` (optional) if specified, an angular `accept` validator will be added to check | |
// for files' mime type | |
// - `maxsize` (optional) if specified, an angular `maxsize` validator will be added to check | |
// for files' size | |
.directive('input', inputTypeFileDirective); | |
function inputTypeFileDirective () { | |
return { | |
restrict: 'E', | |
require: '?ngModel', | |
link: function (scope, element, attrs, ngModel) { | |
if (attrs.type !== 'file' || !angular.isDefined(ngModel)) { | |
return; | |
} | |
element.on('change', updateModelWithFile); | |
scope.$on('$destroy', function () { | |
element.off('change', updateModelWithFile); | |
}); | |
if (attrs.maxsize) { | |
var maxsize = parseInt(attrs.maxsize); | |
ngModel.$validators.maxsize = function(modelValue, viewValue) { | |
var value = modelValue || viewValue; | |
if (!angular.isArray(value)) { | |
value = [value]; | |
} | |
for (var i = value.length - 1; i >= 0; i--) { | |
if (value[i] && value[i].size && value[i].size > maxsize) { | |
return false; | |
} | |
} | |
return true; | |
}; | |
} | |
if (attrs.accept) { | |
var accept = attrs.accept.split(','); | |
ngModel.$validators.accept = function(modelValue, viewValue) { | |
var value = modelValue || viewValue; | |
if (!angular.isArray(value)) { | |
value = [value]; | |
} | |
for (var i = value.length - 1; i >= 0; i--) { | |
if (value[i] && accept.indexOf(value[i].type) === -1) { | |
return false; | |
} | |
} | |
return true; | |
}; | |
} | |
function updateModelWithFile (event) { | |
var files = event.target.files; | |
if (!angular.isDefined(attrs.multiple)) { | |
files = files[0]; | |
} else { | |
files = Array.prototype.slice.apply(files); | |
} | |
ngModel.$setViewValue(files, event); | |
} | |
} | |
}; | |
} | |
})(); |
can you help me implementation you directive in my project, please ?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
thanks dude =)