{"__symbolic":"module","version":3,"metadata":{"NgxFiledropperModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","name":"NgxFiledropperComponent"},{"__symbolic":"reference","name":"NgxFiledropperDirective"}],"exports":[{"__symbolic":"reference","name":"NgxFiledropperComponent"},{"__symbolic":"reference","name":"NgxFiledropperDirective"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"NgxFiledropperModule"}}}}},"NgxFiledropperComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"app-filedrop","template":"<div class=\"filedrop-parent-container\"> <div class=\"filedrop-container\"> <div class=\"filedrop-dropzone\" filedrop (invalidFileEmitter)=\"dropzoneTempInvalid()\" (filesChangeEmitter)=\"onFilesChange($event)\" [allowed_extensions]=\"allowedExtensions\" [ngClass]=\"{'filedrop-invalid' : dropzoneInvalid }\"> <div *ngIf=\"!dropzoneInvalid\"> Drop your file here! </div> <div *ngIf=\"dropzoneInvalid\"> Invalid file dropped! </div> </div> </div> <div class=\"filedrop-thumbnails-container\"> <div class=\"filedrop-thumbnail\" *ngFor=\"let thumbnail of thumbnails; let i = index\"> <div class=\"filedrop-close\" (click)=\"deleteFile(i)\"> <i class=\"fa fa-times\"></i> </div> <img [attr.src]='thumbnails[i]' alt=\"\" /> <div class=\"filedrop-thumbnail-info\"> <div class=\"filedrop-selected-info\"> <div class=\"filedrop-label\"> File Name: </div> <div> {{currentFiles[i].name}} </div> </div> <div class=\"filedrop-selected-info\"> <div class=\"filedrop-label\"> Type: </div> <div> {{currentFiles[i].type}} </div> </div> <div class=\"filedrop-selected-info\"> <div class=\"filedrop-label\"> Size: </div> <div> {{currentFiles[i].size}} bytes </div> </div> </div> </div> </div> </div>","styles":[".filedrop-parent-container { display: flex; margin: 30px; } .filedrop-container { height: 20vh; width: 15vw; min-width: 220px; margin-right: 30px; display: flex; flex-direction: column; } .filedrop-container .filedrop-dropzone { flex-grow: 0; width: 200px; height: 5vh; text-align: center; vertical-align: middle; line-height: 5vh; padding: 10px; border: 2px dashed gray; background-color: #e6e6e6; } .filedrop-container .filedrop-dropzone.filedrop-invalid { background-color: #d65c5c !important; } .filedrop-thumbnails-container { display: flex; flex-wrap: wrap; flex-grow: 0; } .filedrop-thumbnails-container .filedrop-thumbnail { margin-right: 1vw; margin-bottom: 1vw; background-color: #e6e6e6; padding: 20px; position: relative; display: flex; flex-direction: column; justify-content: space-between; align-content: space-between; } .filedrop-thumbnails-container .filedrop-thumbnail .filedrop-close { position: absolute; right: 3px; top: -6px; font-size: 1.4em !important; } .filedrop-thumbnails-container .filedrop-thumbnail .filedrop-close:hover { color: #d65c5c; cursor: pointer; } .filedrop-thumbnails-container .filedrop-thumbnail img { display: block; margin: auto; } .filedrop-thumbnails-container .filedrop-thumbnail .filedrop-thumbnail-info { display: flex; flex-direction: column; } .filedrop-thumbnails-container .filedrop-thumbnail .filedrop-thumbnail-info div.filedrop-selected-info { display: flex; flex-grow: 1; padding: 3px 0 3px 0; } .filedrop-thumbnails-container .filedrop-thumbnail .filedrop-thumbnail-info div.filedrop-selected-info:first-of-type { padding-top: 20px; } .filedrop-thumbnails-container .filedrop-thumbnail .filedrop-thumbnail-info div.filedrop-selected-info .filedrop-label { flex-grow: 0; width: 120px; } "]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"onFilesChange":[{"__symbolic":"method"}],"deleteFile":[{"__symbolic":"method"}],"dropzoneTempInvalid":[{"__symbolic":"method"}],"readFile":[{"__symbolic":"method"}],"parsePdf":[{"__symbolic":"method"}],"buildThumbnail":[{"__symbolic":"method"}],"resize":[{"__symbolic":"method"}]}},"NgxFiledropperDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[filedrop]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"filesChangeEmitter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"invalidFileEmitter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"allowed_extensions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"background":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.background"]}]}],"ondragover":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragover",["$event"]]}]}],"onDragLeave":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragleave",["$event"]]}]}],"onDrop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["drop",["$event"]]}]}]}}},"origins":{"NgxFiledropperModule":"./index","NgxFiledropperComponent":"./ngx-filedropper.component","NgxFiledropperDirective":"./ngx-filedropper.directive"},"importAs":"ngx-filedropper"}