ngx-uploader-may/ngx-uploader-may.metadata.json

Angular file uploader with drag and drop capability and upload progress

{"__symbolic":"module","version":4,"metadata":{"NgxUploaderMayService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ngInjectableDef":{}}},"NgxUploaderMayComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"ngx-uploader-may","template":"<div class=\"__ngx-uploader\">\n    <div class=\"upload-area\">\n        <div class=\"placeholder-area\">\n            <img src=\"data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU4Ljk5OSA1OC45OTkiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDU4Ljk5OSA1OC45OTk7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPgo8Zz4KCTxwYXRoIGQ9Ik0xOS40NzksMTIuMDE5YzAuMjU2LDAsMC41MTItMC4wOTgsMC43MDctMC4yOTNsOC4zMTMtOC4zMTN2MzUuNTg2YzAsMC41NTMsMC40NDcsMSwxLDFzMS0wLjQ0NywxLTFWMy40MTNsOC4yNzIsOC4yNzIgICBjMC4zOTEsMC4zOTEsMS4wMjMsMC4zOTEsMS40MTQsMHMwLjM5MS0xLjAyMywwLTEuNDE0bC05Ljk3OC05Ljk3OGMtMC4wOTItMC4wOTMtMC4yMDMtMC4xNjYtMC4zMjctMC4yMTcgICBjLTAuMjQ0LTAuMTAxLTAuNTE5LTAuMTAxLTAuNzY0LDBjLTAuMTIzLDAuMDUxLTAuMjM0LDAuMTI1LTAuMzI2LDAuMjE3TDE4Ljc3MiwxMC4zMTJjLTAuMzkxLDAuMzkxLTAuMzkxLDEuMDIzLDAsMS40MTQgICBDMTguOTY3LDExLjkyMiwxOS4yMjMsMTIuMDE5LDE5LjQ3OSwxMi4wMTl6IiBmaWxsPSIjZDVkNWQ1Ii8+Cgk8cGF0aCBkPSJNMzYuNDk5LDE1Ljk5OWMtMC41NTMsMC0xLDAuNDQ3LTEsMXMwLjQ0NywxLDEsMWgxM3YzOWgtNDB2LTM5aDEzYzAuNTUzLDAsMS0wLjQ0NywxLTFzLTAuNDQ3LTEtMS0xaC0xNXY0M2g0NHYtNDNIMzYuNDk5ICAgeiIgZmlsbD0iI2Q1ZDVkNSIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=\" />\n            <p>\n                Drag files to upload\n            </p>\n        </div>\n        <button type=\"button\" [disabled]=\"isUploading\" [ngClass]=\"{'on-file-drag': isFileDragEnter}\" (click)=\"onClickUploaderBtn()\" (drop)=\"onFileDrop($event)\" (dragover)=\"onFileDragOverEnter($event)\" (dragenter)=\"onFileDragOverEnter($event)\" (dragleave)=\"onFileDragLeaveEnd($event)\" (dragend)=\"onFileDragLeaveEnd($event)\"></button>\n    </div>\n    <input #uploadField type=\"file\" (change)=\"onAttachedFile($event.target.files)\" [attr.multiple]=\"_isMulti ? '' : null\">\n    <div *ngFor=\"let item of files\" class=\"upload-progress-container\">\n        <small>{{item.fileSizeLabel}}</small>\n        <div class=\"upload-progress-bar\">\n            <div class=\"upload-progress\" [ngStyle]=\"{'width': item.uploadProgress+'%'}\" [ngClass]=\"{'upload-progress-red': item.uploadProgress==100 && !item.isSuccess}\"></div>\n        </div>\n        <div class=\"progress-text\">\n            <small>{{item.uploadProgress}}%</small>\n            <small>\n                <img *ngIf=\"item.uploadProgress==100 && item.isSuccess\" src=\"data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNNDM3LjAxOSw3NC45OEMzODguNjY3LDI2LjYyOSwzMjQuMzgsMCwyNTYsMEMxODcuNjE5LDAsMTIzLjMzMiwyNi42MjksNzQuOTgsNzQuOThDMjYuNjI5LDEyMy4zMzIsMCwxODcuNjIsMCwyNTYgICAgczI2LjYyOSwxMzIuNjY3LDc0Ljk4LDE4MS4wMTlDMTIzLjMzMiw0ODUuMzcxLDE4Ny42Miw1MTIsMjU2LDUxMnMxMzIuNjY3LTI2LjYyOSwxODEuMDE5LTc0Ljk4ICAgIEM0ODUuMzcxLDM4OC42NjcsNTEyLDMyNC4zOCw1MTIsMjU2UzQ4NS4zNzEsMTIzLjMzMyw0MzcuMDE5LDc0Ljk4eiBNMzc4LjMwNiwxOTUuMDczTDIzNS4yNDEsMzM4LjEzOSAgICBjLTIuOTI5LDIuOTI5LTYuNzY4LDQuMzkzLTEwLjYwNiw0LjM5M2MtMy44MzksMC03LjY3OC0xLjQ2NC0xMC42MDctNC4zOTNsLTgwLjMzNC04MC4zMzNjLTUuODU4LTUuODU3LTUuODU4LTE1LjM1NCwwLTIxLjIxMyAgICBjNS44NTctNS44NTgsMTUuMzU1LTUuODU4LDIxLjIxMywwbDY5LjcyOCw2OS43MjdsMTMyLjQ1OC0xMzIuNDZjNS44NTctNS44NTgsMTUuMzU1LTUuODU4LDIxLjIxMywwICAgIEMzODQuMTY0LDE3OS43MTgsMzg0LjE2NCwxODkuMjE1LDM3OC4zMDYsMTk1LjA3M3oiIGZpbGw9IiMzMmM3NDEiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K\" />\n                <img *ngIf=\"item.uploadProgress==100 && !item.isSuccess\" src=\"data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUyIDUyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MiA1MjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiPgo8Zz4KCTxwYXRoIGQ9Ik0yNiwwQzExLjY2NCwwLDAsMTEuNjYzLDAsMjZzMTEuNjY0LDI2LDI2LDI2czI2LTExLjY2MywyNi0yNlM0MC4zMzYsMCwyNiwweiBNMjYsNTBDMTIuNzY3LDUwLDIsMzkuMjMzLDIsMjYgICBTMTIuNzY3LDIsMjYsMnMyNCwxMC43NjcsMjQsMjRTMzkuMjMzLDUwLDI2LDUweiIgZmlsbD0iI0Q4MDAyNyIvPgoJPHBhdGggZD0iTTM1LjcwNywxNi4yOTNjLTAuMzkxLTAuMzkxLTEuMDIzLTAuMzkxLTEuNDE0LDBMMjYsMjQuNTg2bC04LjI5My04LjI5M2MtMC4zOTEtMC4zOTEtMS4wMjMtMC4zOTEtMS40MTQsMCAgIHMtMC4zOTEsMS4wMjMsMCwxLjQxNEwyNC41ODYsMjZsLTguMjkzLDguMjkzYy0wLjM5MSwwLjM5MS0wLjM5MSwxLjAyMywwLDEuNDE0QzE2LjQ4OCwzNS45MDIsMTYuNzQ0LDM2LDE3LDM2ICAgczAuNTEyLTAuMDk4LDAuNzA3LTAuMjkzTDI2LDI3LjQxNGw4LjI5Myw4LjI5M0MzNC40ODgsMzUuOTAyLDM0Ljc0NCwzNiwzNSwzNnMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5MyAgIGMwLjM5MS0wLjM5MSwwLjM5MS0xLjAyMywwLTEuNDE0TDI3LjQxNCwyNmw4LjI5My04LjI5M0MzNi4wOTgsMTcuMzE2LDM2LjA5OCwxNi42ODQsMzUuNzA3LDE2LjI5M3oiIGZpbGw9IiNEODAwMjciLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K\" />\n                {{item.fileLabel}}\n            </small>\n        </div>\n    </div>\n</div>","styles":[".__ngx-uploader input{display:none}.__ngx-uploader .upload-area{padding:5rem;background-color:#fafafa;position:relative;border:1.5px dashed #d5d5d5}.__ngx-uploader .upload-area .placeholder-area{display:flex;align-items:center;justify-content:center;flex-direction:column;position:absolute;top:0;left:0;right:0;bottom:0}.__ngx-uploader .upload-area .placeholder-area img{width:30px;margin-bottom:10px}.__ngx-uploader .upload-area button{position:absolute;top:0;left:0;right:0;bottom:0;background:0 0;border:none;cursor:pointer;width:100%;padding:0}.__ngx-uploader .upload-area button:focus{outline:0}.__ngx-uploader .upload-area button:active{box-shadow:inset 0 1px 20px -3px rgba(16,83,158,.72)}.__ngx-uploader .upload-area button:hover{background:rgba(11,116,150,.1)}.__ngx-uploader .upload-area button.on-file-drag{background:rgba(0,0,0,.5)}.__ngx-uploader .upload-progress-container{margin-top:15px}.__ngx-uploader .upload-progress-container p{margin-bottom:5px}.__ngx-uploader .upload-progress-container .upload-progress-bar{background-color:#e2e7ee;height:5px;margin-bottom:5px;border-radius:4px}.__ngx-uploader .upload-progress-container .upload-progress-bar .upload-progress{height:100%;width:0;background-color:#1991eb;transition:width .6s;border-radius:4px}.__ngx-uploader .upload-progress-container .upload-progress-bar .upload-progress.upload-progress-red{background-color:#c50000}.__ngx-uploader .upload-progress-container .progress-text,.__ngx-uploader .upload-progress-container .progress-text small{display:flex;align-items:center;justify-content:space-between;flex-direction:row}.__ngx-uploader .upload-progress-container .progress-text small img{margin-right:5px}"]}]}],"members":{"inputFileField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":12,"character":3},"arguments":["uploadField"]}]}],"allowedExtensions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3},"arguments":["allowed-extensions"]}]}],"allowedSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3},"arguments":["allowed-size"]}]}],"maxAllowedFiles":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3},"arguments":["max-allowed-files"]}]}],"formData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3},"arguments":["form-data"]}]}],"formDataUploadKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3},"arguments":["upload-form-key"]}]}],"uploadUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":3},"arguments":["upload-url"]}]}],"uploadReqMethod":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":3},"arguments":["request-method"]}]}],"isMulti":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":3},"arguments":["is-multi"]}]}],"onError":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":62,"character":3},"arguments":["onError"]}]}],"onUpload":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":63,"character":3},"arguments":["onUpload"]}]}],"onSuccess":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":64,"character":3},"arguments":["onSuccess"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":70,"character":28}]}],"ngOnInit":[{"__symbolic":"method"}],"onClickUploaderBtn":[{"__symbolic":"method"}],"onFileDragOverEnter":[{"__symbolic":"method"}],"onFileDragLeaveEnd":[{"__symbolic":"method"}],"onFileDrop":[{"__symbolic":"method"}],"setOnFileDragged":[{"__symbolic":"method"}],"onAttachedFile":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"uploadFile":[{"__symbolic":"method"}],"onUploadSuccess":[{"__symbolic":"method"}],"onUploadError":[{"__symbolic":"method"}],"publishValue":[{"__symbolic":"method"}],"isAllFilesUploadDone":[{"__symbolic":"method"}],"createFormData":[{"__symbolic":"method"}],"getFileExtension":[{"__symbolic":"method"}],"getFileSizeMB":[{"__symbolic":"method"}],"getFileSizeLabel":[{"__symbolic":"method"}],"clearFileInput":[{"__symbolic":"method"}],"clearFiles":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}]}},"UploadFile":{"__symbolic":"class","members":{}},"NgxUploaderMayModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"NgxUploaderMayComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":4},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClientModule","line":9,"character":4}],"exports":[{"__symbolic":"reference","name":"NgxUploaderMayComponent"}]}]}],"members":{}}},"origins":{"NgxUploaderMayService":"./lib/ngx-uploader-may.service","NgxUploaderMayComponent":"./lib/ngx-uploader-may.component","UploadFile":"./lib/ngx-uploader-may.component","NgxUploaderMayModule":"./lib/ngx-uploader-may.module"},"importAs":"ngx-uploader-may"}