angular-schema-form-nwp-file-upload
Version:
Upload file type for Angular Schema Form
7 lines • 11.1 kB
JavaScript
/**
* angular-schema-form-nwp-file-upload - Upload file type for Angular Schema Form
* @version v0.1.5
* @link https://github.com/saburab/angular-schema-form-nwp-file-upload
* @license MIT
*/
"use strict";angular.module("schemaForm").config(["schemaFormProvider","schemaFormDecoratorsProvider","sfPathProvider",function(e,r,i){var a="Wrong file type. Allowed types are ",n="This file is too large. Maximum size allowed is ",l="Current file size:",s="You have to upload at least one file",t="You can't upload more than one file.",o=function(r,o,m){if("array"===o.type&&"singlefile"===o.format){o.pattern&&o.pattern.mimeType&&!o.pattern.validationMessage&&(o.pattern.validationMessage=a),o.maxSize&&o.maxSize.maximum&&!o.maxSize.validationMessage&&(o.maxSize.validationMessage=n,o.maxSize.validationMessage2=l),o.minItems&&o.minItems.minimum&&!o.minItems.validationMessage&&(o.minItems.validationMessage=s),o.maxItems&&o.maxItems.maximum&&!o.maxItems.validationMessage&&(o.maxItems.validationMessage=t);var d=e.stdFormObj(r,o,m);return d.key=m.path,d.type="nwpFileUpload",m.lookup[i.stringify(m.path)]=d,d}};e.defaults.array.unshift(o);var m=function(r,o,m){if("array"===o.type&&"multifile"===o.format){o.pattern&&o.pattern.mimeType&&!o.pattern.validationMessage&&(o.pattern.validationMessage=a),o.maxSize&&o.maxSize.maximum&&!o.maxSize.validationMessage&&(o.maxSize.validationMessage=n,o.maxSize.validationMessage2=l),o.minItems&&o.minItems.minimum&&!o.minItems.validationMessage&&(o.minItems.validationMessage=s),o.maxItems&&o.maxItems.maximum&&!o.maxItems.validationMessage&&(o.maxItems.validationMessage=t);var d=e.stdFormObj(r,o,m);return d.key=m.path,d.type="nwpFileUpload",m.lookup[i.stringify(m.path)]=d,d}};e.defaults.array.unshift(m),r.addMapping("bootstrapDecorator","nwpFileUpload","directives/decorators/bootstrap/nwp-file/nwp-file.html")}]),angular.module("ngSchemaFormFile",["ngFileUpload","ngMessages"]).directive("ngSchemaFile",["Upload","$timeout","$q",function(e,r,i){return{restrict:"A",scope:!0,require:"ngModel",link:function(i,a,n,l){function s(a){a&&!a.$error&&i.url&&(a.upload=e.upload({url:i.url,file:a}),a.upload.then(function(e){r(function(){a.result=e.data}),l.$setViewValue(e.data),l.$commitViewValue()},function(e){e.status>0&&(i.errorMsg=e.status+": "+e.data)}),a.upload.progress(function(e){a.progress=Math.min(100,parseInt(100*e.loaded/e.total))}))}i.url=i.form&&i.form.endpoint,i.isSinglefileUpload=i.form&&i.form.schema&&"singlefile"===i.form.schema.format,i.selectFile=function(e){i.picFile=e},i.selectFiles=function(e){i.picFiles=e},i.uploadFile=function(e){e&&s(e)},i.uploadFiles=function(e){e.length&&angular.forEach(e,function(e){s(e)})},i.validateField=function(){i.uploadForm.file&&i.uploadForm.file.$valid&&i.picFile&&!i.picFile.$error?console.log("singlefile-form is invalid"):i.uploadForm.files&&i.uploadForm.files.$valid&&i.picFiles&&!i.picFiles.$error?console.log("multifile-form is invalid"):console.log("single- and multifile-form are valid")},i.submit=function(){i.uploadForm.file&&i.uploadForm.file.$valid&&i.picFile&&!i.picFile.$error?i.uploadFile(i.picFile):i.uploadForm.files&&i.uploadForm.files.$valid&&i.picFiles&&!i.picFiles.$error&&i.uploadFiles(i.picFiles)},i.$on("schemaFormValidate",i.validateField),i.$on("schemaFormFileUploadSubmit",i.submit)}}}]),angular.module("schemaForm").run(["$templateCache",function(e){e.put("directives/decorators/bootstrap/nwp-file/nwp-file.html",'<ng-form class="file-upload mb-lg" ng-schema-file ng-model="$$value$$" name="uploadForm">\r\n <label ng-show="form.title && form.notitle !== true" class="control-label" for="fileInputButton" ng-class="{\'sr-only\': !showTitle(), \'text-danger\': uploadForm.$error.required && !uploadForm.$pristine}">\r\n {{ form.title }}<i ng-show="form.required"> *</i>\r\n </label>\r\n\r\n <div ng-show="picFile">\r\n <div ng-include="\'uploadProcess.html\'" class="mb"></div>\r\n </div>\r\n\r\n <ul ng-show="picFiles && picFiles.length" class="list-group">\r\n <li class="list-group-item" ng-repeat="picFile in picFiles">\r\n <div ng-include="\'uploadProcess.html\'"></div>\r\n </li>\r\n </ul>\r\n\r\n <div class="well well-sm bg-white mb" ng-class="{\'has-error border-danger\': (uploadForm.$error.required && !uploadForm.$pristine) || (hasError() && errorMessage(schemaError()))}">\r\n <small class="text-muted" ng-show="form.description" ng-bind-html="form.description"></small>\r\n <div ng-if="isSinglefileUpload" ng-include="\'singleFileUpload.html\'"></div>\r\n <div ng-if="!isSinglefileUpload" ng-include="\'multiFileUpload.html\'"></div>\r\n <div class="help-block mb0" ng-show="uploadForm.$error.required && !uploadForm.$pristine">{{ \'modules.attribute.fields.required.caption\' | translate }}</div>\r\n <div class="help-block mb0" ng-show="(hasError() && errorMessage(schemaError()))" ng-bind-html="(hasError() && errorMessage(schemaError()))"></div>\r\n </div>\r\n</ng-form>\r\n\r\n<script type=\'text/ng-template\' id="uploadProcess.html">\r\n <div class="row mb">\r\n <div class="col-sm-4 mb-sm">\r\n <label title="{{ \'modules.upload.field.preview\' | translate }}" class="text-info">{{\r\n \'modules.upload.field.preview\' | translate }}</label>\r\n <img ngf-src="picFile" class="img-thumbnail img-responsive">\r\n <div class="img-placeholder"\r\n ng-class="{\'show\': picFile.$invalid && !picFile.blobUrl, \'hide\': !picFile || picFile.blobUrl}">No preview\r\n available\r\n </div>\r\n </div>\r\n <div class="col-sm-4 mb-sm">\r\n <label title="{{ \'modules.upload.field.filename\' | translate }}" class="text-info">{{\r\n \'modules.upload.field.filename\' | translate }}</label>\r\n <div class="filename" title="{{ picFile.name }}">{{ picFile.name }}</div>\r\n </div>\r\n <div class="col-sm-4 mb-sm">\r\n <label title="{{ \'modules.upload.field.progress\' | translate }}" class="text-info">{{\r\n \'modules.upload.field.progress\' | translate }}</label>\r\n <div class="progress">\r\n <div class="progress-bar progress-bar-striped" role="progressbar"\r\n ng-class="{\'progress-bar-success\': picFile.progress == 100}"\r\n ng-style="{width: picFile.progress + \'%\'}">\r\n {{ picFile.progress }} %\r\n </div>\r\n </div>\r\n <button class="btn btn-primary btn-sm" type="button" ng-click="uploadFile(picFile)"\r\n ng-disabled="!picFile || picFile.$error">{{ "buttons.upload" | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n <div ng-messages="uploadForm.$error" ng-messages-multiple="">\r\n <div class="text-danger errorMsg" ng-message="maxSize">{{ form.schema[picFile.$error].validationMessage | translate }} <strong>{{picFile.$errorParam}}</strong>. ({{ form.schema[picFile.$error].validationMessage2 | translate }} <strong>{{picFile.size / 1000000|number:1}}MB</strong>)</div>\r\n <div class="text-danger errorMsg" ng-message="pattern">{{ form.schema[picFile.$error].validationMessage | translate }} <strong>{{picFile.$errorParam}}</strong></div>\r\n <div class="text-danger errorMsg" ng-message="maxItems">{{ form.schema[picFile.$error].validationMessage | translate }} <strong>{{picFile.$errorParam}}</strong></div>\r\n <div class="text-danger errorMsg" ng-message="minItems">{{ form.schema[picFile.$error].validationMessage | translate }} <strong>{{picFile.$errorParam}}</strong></div>\r\n <div class="text-danger errorMsg" ng-show="errorMsg">{{errorMsg}}</div>\r\n </div>\r\n</script>\r\n\r\n<script type=\'text/ng-template\' id="singleFileUpload.html">\r\n <div ngf-drop="selectFile(picFile)" ngf-select="selectFile(picFile)" type="file" ngf-multiple="false"\r\n ng-model="picFile" name="file"\r\n ng-attr-ngf-pattern="{{form.schema.pattern && form.schema.pattern.mimeType ? form.schema.pattern.mimeType : undefined }}"\r\n ng-attr-ngf-max-size="{{form.schema.maxSize && form.schema.maxSize.maximum ? form.schema.maxSize.maximum : undefined }}"\r\n ng-required="form.required"\r\n accept="{{form.schema.pattern && form.schema.pattern.mimeType}}"\r\n ng-model-options="form.ngModelOptions" ngf-drag-over-class="dragover" class="drop-box dragAndDropDescription">\r\n <p class="text-center">{{ \'modules.upload.descriptionSinglefile\' | translate }}</p>\r\n </div>\r\n <div ngf-no-file-drop>{{ \'modules.upload.dndNotSupported\' | translate}}</div>\r\n\r\n <button ngf-select="selectFile(picFile)" type="file" ngf-multiple="false" ng-model="picFile" name="file"\r\n ng-attr-ngf-pattern="{{form.schema.pattern && form.schema.pattern.mimeType ? form.schema.pattern.mimeType : undefined }}"\r\n ng-attr-ngf-max-size="{{form.schema.maxSize && form.schema.maxSize.maximum ? form.schema.maxSize.maximum : undefined }}"\r\n ng-required="form.required"\r\n accept="{{form.schema.pattern && form.schema.pattern.mimeType}}"\r\n ng-model-options="form.ngModelOptions" id="fileInputButton"\r\n class="btn btn-primary btn-block {{form.htmlClass}} mt-lg mb">\r\n <fa fw="fw" name="upload" class="mr-sm"></fa>\r\n {{ "buttons.add" | translate }}\r\n </button>\r\n</script>\r\n\r\n<script type=\'text/ng-template\' id="multiFileUpload.html">\r\n <div ngf-drop="selectFiles(picFiles)" ngf-select="selectFiles(picFiles)" type="file" ngf-multiple="true"\r\n ng-model="picFiles" name="files"\r\n ng-attr-ngf-pattern="{{form.schema.pattern && form.schema.pattern.mimeType ? form.schema.pattern.mimeType : undefined }}"\r\n ng-attr-ngf-max-size="{{form.schema.maxSize && form.schema.maxSize.maximum ? form.schema.maxSize.maximum : undefined }}"\r\n ng-required="form.required"\r\n accept="{{form.schema.pattern && form.schema.pattern.mimeType}}"\r\n ng-model-options="form.ngModelOptions" ngf-drag-over-class="dragover" class="drop-box dragAndDropDescription">\r\n <p class="text-center">{{ \'modules.upload.descriptionMultifile\' | translate }}</p>\r\n </div>\r\n <div ngf-no-file-drop>{{ \'modules.upload.dndNotSupported\' | translate}}</div>\r\n\r\n <button ngf-select="selectFiles(picFiles)" type="file" ngf-multiple="true" multiple ng-model="picFiles" name="files"\r\n accept="{{form.schema.pattern && form.schema.pattern.mimeType}}"\r\n ng-attr-ngf-pattern="{{form.schema.pattern && form.schema.pattern.mimeType ? form.schema.pattern.mimeType : undefined }}"\r\n ng-attr-ngf-max-size="{{form.schema.maxSize && form.schema.maxSize.maximum ? form.schema.maxSize.maximum : undefined }}"\r\n ng-required="form.required"\r\n ng-model-options="form.ngModelOptions" id="fileInputButton"\r\n class="btn btn-primary btn-block {{form.htmlClass}} mt-lg mb">\r\n <fa fw="fw" name="upload" class="mr-sm"></fa>\r\n {{ "buttons.add" | translate }}\r\n </button>\r\n</script>\r\n')}]);