@snapmobile/snapjs-admin/admin/shared/formcontrol-file-upload/formcontrol-file-upload.component.metadata.json

SnapJS Admin

[{"__symbolic":"module","version":3,"metadata":{"FormControlFileUploadComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"app-formcontrol-file-upload","template":"\n    <div [formGroup]=\"form\" class=\"row\">\n\n      <!-- Images -->\n      <div *ngIf=\"!isMultiple\">\n        <label class=\"col-sm-2 control-label\">{{displayName}}:</label>\n\n        <div *ngIf=\"form.controls[field].value\">\n          <div *ngIf=\"form.controls[field].value.url\">\n            <img *ngIf=\"isImage(form.controls[field].value.type)\" src=\"{{constants.AWS_S3_BASE_URL}}/{{form.controls[field].value.url}}\"\n              style=\"max-width: 200px; max-height: 200px;\">\n            <a *ngIf=\"!isImage(form.controls[field].value.type)\" href=\"{{constants.AWS_S3_BASE_URL}}/{{form.controls[field].value.url}}\"\n              target=\"_blank\">{{form.controls[field].value.name}}</a>\n          </div>\n        </div>\n\n        <div class=\"col-sm-offset-2 col-sm-10\" *ngIf=\"!form.controls[field].disabled\">\n          <span *ngIf=\"form.value[field].name\" (click)=\"form.value[field] = {}\">Remove</span>\n        </div>\n      </div>\n\n      <!-- Multiple images -->\n      <div *ngIf=\"isMultiple\">\n        <div [formArrayName]=\"field\">\n          <label for=\"name\" class=\"col-sm-2 control-label\">{{field}}:</label>\n          <div *ngIf=\"form.controls[field]\" class=\"col-sm-10\">\n            <div *ngFor=\"let item of form.controls[field].controls; let i = index; \">\n              <div *ngIf=\"item.controls.url\">\n                <img *ngIf=\"isImage(item.controls.type.value)\" src=\"{{constants.AWS_S3_BASE_URL}}/{{item.controls.url.value}}\"\n                  style=\"max-width: 200px; max-height: 200px;\">\n                <a *ngIf=\"!isImage(item.controls.type.value)\" href=\"{{constants.AWS_S3_BASE_URL}}/{{item.controls.url.value}}\"\n                  target=\"_blank\">{{item.controls.name.value}}</a>\n\n                <!-- Remove -->\n                <p (click)=\"removeItem(i, field)\">Remove</p>\n              </div>\n              <div [formGroupName]=\"i\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Upload form -->\n      <div class=\"col-sm-offset-2 col-sm-10\" *ngIf=\"!form.controls[field].disabled\">\n        <input type=\"file\" ng2FileSelect [uploader]=\"uploader\" multiple=\"isMultiple\" />\n        <p *ngIf=\"errorMessage\">{{errorMessage}}</p>\n      </div>\n\n      <!-- Display uploaded image and progress -->\n      <div *ngFor=\"let item of uploader.queue\" class=\"col-sm-offset-2 col-sm-10\">\n        <div *ngIf=\"!item.isSuccess\">\n          <p>{{item.file.name}}</p>\n\n          <progress-bar [progress]=item.progress></progress-bar>\n          Progress: {{item.progress}}%\n\n          <p *ngIf=\"item.isUploading\">Uploading</p>\n          <p *ngIf=\"item.isSuccess\">Uploaded</p>\n          <p *ngIf=\"item.isError\">Error</p>\n        </div>\n      </div>\n\n      <!-- Upload button -->\n      <div class=\"col-sm-offset-2 col-sm-10\" *ngIf=\"!form.controls[field].disabled\">\n        <button type=\"button\" class=\"btn btn-success btn-s\" (click)=\"upload()\" [disabled]=\"isSubmitting || !uploader.getNotUploadedItems().length\">\n          <span class=\"glyphicon glyphicon-upload\"></span> Upload\n        </button>\n      </div>\n\n    </div>\n  ","styles":["\n    .my-drop-zone{border:dotted 3px lightgray}.nv-file-over{border:dotted 3px red}\n  "]}]}],"members":{"isMultiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"field":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"displayName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"object":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"allowedMimeType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxFileSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"../../constants.service","name":"ConstantsService"}]}],"ngOnInit":[{"__symbolic":"method"}],"upload":[{"__symbolic":"method"}],"getSignedRequest":[{"__symbolic":"method"}],"uploadFile":[{"__symbolic":"method"}],"addItem":[{"__symbolic":"method"}],"initItem":[{"__symbolic":"method"}],"removeItem":[{"__symbolic":"method"}],"isImage":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"FormControlFileUploadComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"app-formcontrol-file-upload","template":"\n    <div [formGroup]=\"form\" class=\"row\">\n\n      <!-- Images -->\n      <div *ngIf=\"!isMultiple\">\n        <label class=\"col-sm-2 control-label\">{{displayName}}:</label>\n\n        <div *ngIf=\"form.controls[field].value\">\n          <div *ngIf=\"form.controls[field].value.url\">\n            <img *ngIf=\"isImage(form.controls[field].value.type)\" src=\"{{constants.AWS_S3_BASE_URL}}/{{form.controls[field].value.url}}\"\n              style=\"max-width: 200px; max-height: 200px;\">\n            <a *ngIf=\"!isImage(form.controls[field].value.type)\" href=\"{{constants.AWS_S3_BASE_URL}}/{{form.controls[field].value.url}}\"\n              target=\"_blank\">{{form.controls[field].value.name}}</a>\n          </div>\n        </div>\n\n        <div class=\"col-sm-offset-2 col-sm-10\" *ngIf=\"!form.controls[field].disabled\">\n          <span *ngIf=\"form.value[field].name\" (click)=\"form.value[field] = {}\">Remove</span>\n        </div>\n      </div>\n\n      <!-- Multiple images -->\n      <div *ngIf=\"isMultiple\">\n        <div [formArrayName]=\"field\">\n          <label for=\"name\" class=\"col-sm-2 control-label\">{{field}}:</label>\n          <div *ngIf=\"form.controls[field]\" class=\"col-sm-10\">\n            <div *ngFor=\"let item of form.controls[field].controls; let i = index; \">\n              <div *ngIf=\"item.controls.url\">\n                <img *ngIf=\"isImage(item.controls.type.value)\" src=\"{{constants.AWS_S3_BASE_URL}}/{{item.controls.url.value}}\"\n                  style=\"max-width: 200px; max-height: 200px;\">\n                <a *ngIf=\"!isImage(item.controls.type.value)\" href=\"{{constants.AWS_S3_BASE_URL}}/{{item.controls.url.value}}\"\n                  target=\"_blank\">{{item.controls.name.value}}</a>\n\n                <!-- Remove -->\n                <p (click)=\"removeItem(i, field)\">Remove</p>\n              </div>\n              <div [formGroupName]=\"i\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Upload form -->\n      <div class=\"col-sm-offset-2 col-sm-10\" *ngIf=\"!form.controls[field].disabled\">\n        <input type=\"file\" ng2FileSelect [uploader]=\"uploader\" multiple=\"isMultiple\" />\n        <p *ngIf=\"errorMessage\">{{errorMessage}}</p>\n      </div>\n\n      <!-- Display uploaded image and progress -->\n      <div *ngFor=\"let item of uploader.queue\" class=\"col-sm-offset-2 col-sm-10\">\n        <div *ngIf=\"!item.isSuccess\">\n          <p>{{item.file.name}}</p>\n\n          <progress-bar [progress]=item.progress></progress-bar>\n          Progress: {{item.progress}}%\n\n          <p *ngIf=\"item.isUploading\">Uploading</p>\n          <p *ngIf=\"item.isSuccess\">Uploaded</p>\n          <p *ngIf=\"item.isError\">Error</p>\n        </div>\n      </div>\n\n      <!-- Upload button -->\n      <div class=\"col-sm-offset-2 col-sm-10\" *ngIf=\"!form.controls[field].disabled\">\n        <button type=\"button\" class=\"btn btn-success btn-s\" (click)=\"upload()\" [disabled]=\"isSubmitting || !uploader.getNotUploadedItems().length\">\n          <span class=\"glyphicon glyphicon-upload\"></span> Upload\n        </button>\n      </div>\n\n    </div>\n  ","styles":["\n    .my-drop-zone{border:dotted 3px lightgray}.nv-file-over{border:dotted 3px red}\n  "]}]}],"members":{"isMultiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"field":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"displayName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"object":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"allowedMimeType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxFileSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"../../constants.service","name":"ConstantsService"}]}],"ngOnInit":[{"__symbolic":"method"}],"upload":[{"__symbolic":"method"}],"getSignedRequest":[{"__symbolic":"method"}],"uploadFile":[{"__symbolic":"method"}],"addItem":[{"__symbolic":"method"}],"initItem":[{"__symbolic":"method"}],"removeItem":[{"__symbolic":"method"}],"isImage":[{"__symbolic":"method"}]}}}}]