Skip to content

Commit

Permalink
Fixed validation on model change, added ngfDataUrl filter
Browse files Browse the repository at this point in the history
  • Loading branch information
Danial Farid authored and Danial Farid committed Oct 10, 2015
1 parent 1cddc3b commit 9f5c469
Show file tree
Hide file tree
Showing 27 changed files with 2,267 additions and 270 deletions.
1 change: 0 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,6 @@ At least one of the `ngf-select` or `ngf-drop` are mandatory for the plugin to l
ngf-validate-force="boolean" // default false, if true file.$error will be set if the dimension or duration
// values for validations cannot be calculated for example image load error or unsupported video by the browser.
// by default it would assume the file is valid if the duration or dimension cannot be calculated by the browser.
ngf-validate-later="boolean" // default false, if true model will be set and change will be called before validation

>Upload/Drop</div>

Expand Down
11 changes: 11 additions & 0 deletions demo/src/main/webapp/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,17 @@
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.8.0/mode/htmlembedded/htmlembedded.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.8.0/mode/xml/xml.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.8.0/mode/javascript/javascript.min.js"></script>

<script src="js/ng-img-crop.js"></script>
<link rel="stylesheet" type="text/css" href="js/ng-img-crop.css">
<style>
.cropArea {
background: #E4E4E4;
overflow: hidden;
width:500px;
height:350px;
}
</style>
</head>

<body ng-app="fileUpload" ng-controller="MyCtrl">
Expand Down
2 changes: 1 addition & 1 deletion demo/src/main/webapp/js/FileAPI.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

120 changes: 69 additions & 51 deletions demo/src/main/webapp/js/ng-file-upload-all.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* progress, resize, thumbnail, preview, validation and CORS
* FileAPI Flash shim for old browsers not supporting FormData
* @author Danial <[email protected]>
* @version 9.0.8
* @version 9.0.9
*/

(function () {
Expand Down Expand Up @@ -427,7 +427,7 @@ if (!window.FileReader) {
* AngularJS file upload directives and services. Supoorts: file upload/drop/paste, resume, cancel/abort,
* progress, resize, thumbnail, preview, validation and CORS
* @author Danial <[email protected]>
* @version 9.0.8
* @version 9.0.9
*/

if (window.XMLHttpRequest && !(window.FileAPI && FileAPI.shouldLoad)) {
Expand All @@ -448,7 +448,7 @@ if (window.XMLHttpRequest && !(window.FileAPI && FileAPI.shouldLoad)) {

var ngFileUpload = angular.module('ngFileUpload', []);

ngFileUpload.version = '9.0.8';
ngFileUpload.version = '9.0.9';

ngFileUpload.service('UploadBase', ['$http', '$q', '$timeout', function ($http, $q, $timeout) {
var upload = this;
Expand Down Expand Up @@ -801,16 +801,6 @@ ngFileUpload.service('Upload', ['$parse', '$timeout', '$compile', 'UploadResize'
return true;
};

function markModelAsDirty(ngModel, files) {
if (files != null && !ngModel.$dirty) {
if (ngModel.$setDirty) {
ngModel.$setDirty();
} else {
ngModel.$dirty = true;
}
}
}

function resize(files, attr, scope, callback) {
var param = upload.attrGetter('ngfResize', attr, scope);
if (!param || !upload.isResizeSupported()) return callback();
Expand Down Expand Up @@ -877,15 +867,9 @@ ngFileUpload.service('Upload', ['$parse', '$timeout', '$compile', 'UploadResize'
var file = files && files.length ? files[0] : null;

if (ngModel) {
markModelAsDirty(ngModel, files);

angular.forEach(ngModel.$ngfValidations, function (validation) {
ngModel.$setValidity(validation.name, validation.valid);
});

if (ngModel) {
ngModel.$setViewValue(isSingleModel ? file : files);
}
upload.applyModelValidation(ngModel, files);
ngModel.$ngfModelChange = true;
ngModel.$setViewValue(isSingleModel ? file : files);
}

if (fileChange) {
Expand Down Expand Up @@ -919,7 +903,7 @@ ngFileUpload.service('Upload', ['$parse', '$timeout', '$compile', 'UploadResize'

attr.$$ngfPrevFiles = files;

if (upload.validate(newFiles, ngModel, attr, scope, upload.attrGetter('ngfValidateLater', attr), function () {
if (upload.validate(newFiles, ngModel, attr, scope, function () {
if (noDelay) {
update(files, [], newFiles, dupFiles, isSingleModel);
} else {
Expand Down Expand Up @@ -1004,6 +988,8 @@ ngFileUpload.directive('ngfSelect', ['$parse', '$timeout', '$compile', 'Upload',
}
}

upload.registerModelChangeValidator(ngModel, attr, scope);

var unwatches = [];
unwatches.push(scope.$watch(attrGetter('ngfMultiple'), function () {
fileElem.attr('multiple', attrGetter('ngfMultiple', scope));
Expand Down Expand Up @@ -1385,26 +1371,28 @@ ngFileUpload.directive('ngfSelect', ['$parse', '$timeout', '$compile', 'Upload',
};
}]);

//ngFileUpload.config(['$compileProvider', function ($compileProvider) {
// if ($compileProvider.imgSrcSanitizationWhitelist) $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|tel|local|file|data|blob):/);
// if ($compileProvider.aHrefSanitizationWhitelist) $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|tel|local|file|data|blob):/);
//}]);
//
//ngFileUpload.filter('$ngfDataUrl', ['UploadDataUrl', '$sce', function (UploadDataUrl, $sce) {
// return function (file, disallowObjectUrl) {
// if (angular.isString(file)) {
// return $sce.trustAsResourceUrl(file);
// }
// if (file && !file.$ngfDataUrl) {
// if (file.$ngfDataUrl === undefined && angular.isObject(file)) {
// file.$ngfDataUrl = null;
// UploadDataUrl.$ngfDataUrl(file, disallowObjectUrl);
// }
// return '';
// }
// return (file && file.$ngfDataUrl ? $sce.trustAsResourceUrl(file.$ngfDataUrl) : file) || '';
// };
//}]);
ngFileUpload.config(['$compileProvider', function ($compileProvider) {
if ($compileProvider.imgSrcSanitizationWhitelist) $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|tel|local|file|data|blob):/);
if ($compileProvider.aHrefSanitizationWhitelist) $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|tel|local|file|data|blob):/);
}]);

ngFileUpload.filter('ngfDataUrl', ['UploadDataUrl', '$sce', function (UploadDataUrl, $sce) {
return function (file, disallowObjectUrl, trustedUrl) {
if (angular.isString(file)) {
return $sce.trustAsResourceUrl(file);
}
var src = file && ((disallowObjectUrl ? file.$ngfDataUrl : file.$ngfBlobUrl) || file.$ngfDataUrl);
if (file && !src) {
if (!file.$ngfDataUrlFilterInProgress && angular.isObject(file)) {
file.$ngfDataUrlFilterInProgress = true;
UploadDataUrl.dataUrl(file, disallowObjectUrl);
}
return '';
}
if (file) delete file.$ngfDataUrlFilterInProgress;
return (file && src ? (trustedUrl ? $sce.trustAsResourceUrl(src) : src) : file) || '';
};
}]);

})();

Expand Down Expand Up @@ -1463,7 +1451,38 @@ ngFileUpload.service('UploadValidate', ['UploadDataUrl', '$q', '$timeout', funct
return valid;
};

upload.validate = function (files, ngModel, attr, scope, later, callback) {
upload.registerModelChangeValidator = function (ngModel, attr, scope) {
if (ngModel) {
ngModel.$formatters.push(function (files) {
if (!ngModel.$ngfModelChange) {
upload.validate(files, ngModel, attr, scope, function () {
upload.applyModelValidation(ngModel, files);
});
} else {
ngModel.$ngfModelChange = false;
}
});
}
};

function markModelAsDirty(ngModel, files) {
if (files != null && !ngModel.$dirty) {
if (ngModel.$setDirty) {
ngModel.$setDirty();
} else {
ngModel.$dirty = true;
}
}
}

upload.applyModelValidation = function (ngModel, files) {
markModelAsDirty(ngModel, files);
angular.forEach(ngModel.$ngfValidations, function (validation) {
ngModel.$setValidity(validation.name, validation.valid);
});
};

upload.validate = function (files, ngModel, attr, scope, callback) {
ngModel = ngModel || {};
ngModel.$ngfValidations = ngModel.$ngfValidations || [];

Expand All @@ -1475,11 +1494,6 @@ ngFileUpload.service('UploadValidate', ['UploadDataUrl', '$q', '$timeout', funct
return upload.attrGetter(name, attr, scope, params);
};

if (later) {
callback.call(ngModel);
return;
}

if (files == null || files.length === 0) {
callback.call(ngModel);
return;
Expand Down Expand Up @@ -1833,7 +1847,7 @@ ngFileUpload.service('UploadResize', ['UploadValidate', '$q', '$timeout', functi
return deferred.promise;
};

var dataURLtoBlob = function (dataurl) {
upload.dataUrltoBlob = function (dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
Expand All @@ -1858,7 +1872,7 @@ ngFileUpload.service('UploadResize', ['UploadValidate', '$q', '$timeout', functi

upload.dataUrl(file, true).then(function (url) {
resize(url, width, height, quality, file.type).then(function (dataUrl) {
var blob = dataURLtoBlob(dataUrl);
var blob = upload.dataUrltoBlob(dataUrl);
blob.name = file.name;
deferred.resolve(blob);
}, function () {
Expand Down Expand Up @@ -1932,6 +1946,10 @@ ngFileUpload.service('UploadResize', ['UploadValidate', '$q', '$timeout', functi
return elem.attr('disabled') || attrGetter('ngfDropDisabled', scope);
}

if (attrGetter('ngfSelect') == null) {
upload.registerModelChangeValidator(ngModel, attr, scope);
}

var leaveTimeout = null;
var stopPropagation = $parse(attrGetter('ngfStopPropagation'));
var dragOverDelay = 1;
Expand Down
6 changes: 3 additions & 3 deletions demo/src/main/webapp/js/ng-file-upload-all.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion demo/src/main/webapp/js/ng-file-upload-shim.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* progress, resize, thumbnail, preview, validation and CORS
* FileAPI Flash shim for old browsers not supporting FormData
* @author Danial <[email protected]>
* @version 9.0.8
* @version 9.0.9
*/

(function () {
Expand Down
2 changes: 1 addition & 1 deletion demo/src/main/webapp/js/ng-file-upload-shim.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 9f5c469

Please sign in to comment.