easy-drag-and-drop-file-upload/easy-drag-and-drop-file-upload.metadata.json

Drag and Drop based file upload for Angular

{"__symbolic":"module","version":4,"metadata":{"EasyDragAndDropFileUploadService":{"__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":{"ɵprov":{}}},"EasyDragAndDropFileUploadComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"lib-easyDragAndDropFileUpload","template":"\n    <p>\n      easy-drag-and-drop-file-upload works!\n    </p>\n  ","styles":[]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"EasyDragAndDropFileUploadModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"EasyDndUploadComponent"},{"__symbolic":"reference","name":"EasyDragAndDropFileUploadComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/platform-browser","name":"BrowserModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":20,"character":4}],"exports":[{"__symbolic":"reference","name":"EasyDragAndDropFileUploadComponent"},{"__symbolic":"reference","name":"EasyDndUploadComponent"}]}]}],"members":{}},"EasyDndUploadComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"ngx-easy-dnd-upload","template":"<div style=\"text-align: center;\">\n\t<h4>{{title}}</h4>\n</div>\n<div class=\"container\" easyDnDFileUpload (fileDropped)=\"onFileDropped($event)\">\n\t<input type=\"file\" [accept]=\"allowedFiles\" #fileDropRef id=\"fileDropRef\" [multiple]=\"allowMultiple\" (change)=\"fileBrowseHandler($event.target.files)\" />\n\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"63\" height=\"64\" viewBox=\"0 0 63 64\">\n\t\t<g fill=\"#3B454F\" fill-rule=\"nonzero\">\n\t\t\t<path\n\t\t\t\td=\"M42.656 15.135a1.953 1.953 0 0 1-1.391-.578L31.5 4.795l-9.765 9.762a1.97 1.97 0 1 1-2.785-2.785L30.106.616a1.97 1.97 0 0 1 2.785 0l11.157 11.156a1.97 1.97 0 0 1-1.392 3.363z\" />\n\t\t\t<path\n\t\t\t\td=\"M31.5 36.791a1.97 1.97 0 0 1-1.969-1.969V2.01a1.97 1.97 0 0 1 3.938 0v32.812a1.97 1.97 0 0 1-1.969 1.969z\" />\n\t\t\t<path\n\t\t\t\td=\"M55.781 63.041H7.22A7.225 7.225 0 0 1 0 55.822V41.385a4.599 4.599 0 0 1 4.594-4.594h7.234a4.567 4.567 0 0 1 4.402 3.276l2.814 9.382a.658.658 0 0 0 .628.467h23.656a.658.658 0 0 0 .628-.467l2.814-9.385a4.572 4.572 0 0 1 4.402-3.273h7.234A4.599 4.599 0 0 1 63 41.385v14.437a7.225 7.225 0 0 1-7.219 7.219zM4.594 40.729a.656.656 0 0 0-.657.656v14.437a3.286 3.286 0 0 0 3.282 3.282H55.78a3.286 3.286 0 0 0 3.282-3.282V41.385a.656.656 0 0 0-.657-.656h-7.234a.65.65 0 0 0-.628.467L47.73 50.58a4.628 4.628 0 0 1-4.402 3.274H19.672a4.567 4.567 0 0 1-4.402-3.276l-2.814-9.382a.65.65 0 0 0-.628-.467H4.594z\" />\n\t\t</g>\n\t</svg>\n\n\t<h3>Drag and drop file/'s here</h3>\n\t<h3>or</h3>\n\t<label for=\"fileDropRef\">Browse File</label>\n</div>\n<div class=\"files-list\">\n\t<div class=\"single-file\" *ngFor=\"let file of files; let i = index\">\n\t\t<div class=\"file-icon\" style=\"width: 50px\">\n\t\t\t<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n\t\t\t\tx=\"0px\" y=\"0px\" viewBox=\"0 0 58 58\" style=\"enable-background:new 0 0 58 58;\" xml:space=\"preserve\">\n\t\t\t\t<polygon style=\"fill:#EDEADA;\" points=\"51.5,14 37.5,0 6.5,0 6.5,58 51.5,58 \" />\n\t\t\t\t<g>\n\t\t\t\t\t<path style=\"fill:#CEC9AE;\"\n\t\t\t\t\t\td=\"M16.5,23h25c0.552,0,1-0.447,1-1s-0.448-1-1-1h-25c-0.552,0-1,0.447-1,1S15.948,23,16.5,23z\" />\n\t\t\t\t\t<path style=\"fill:#CEC9AE;\"\n\t\t\t\t\t\td=\"M16.5,15h10c0.552,0,1-0.447,1-1s-0.448-1-1-1h-10c-0.552,0-1,0.447-1,1S15.948,15,16.5,15z\" />\n\t\t\t\t\t<path style=\"fill:#CEC9AE;\"\n\t\t\t\t\t\td=\"M41.5,29h-25c-0.552,0-1,0.447-1,1s0.448,1,1,1h25c0.552,0,1-0.447,1-1S42.052,29,41.5,29z\" />\n\t\t\t\t\t<path style=\"fill:#CEC9AE;\"\n\t\t\t\t\t\td=\"M41.5,37h-25c-0.552,0-1,0.447-1,1s0.448,1,1,1h25c0.552,0,1-0.447,1-1S42.052,37,41.5,37z\" />\n\t\t\t\t\t<path style=\"fill:#CEC9AE;\"\n\t\t\t\t\t\td=\"M41.5,45h-25c-0.552,0-1,0.447-1,1s0.448,1,1,1h25c0.552,0,1-0.447,1-1S42.052,45,41.5,45z\" />\n\t\t\t\t</g>\n\t\t\t\t<polygon style=\"fill:#CEC9AE;\" points=\"37.5,0 37.5,14 51.5,14 \" />\n\t\t\t</svg>\n\t\t</div>\n\t\t<div class=\"info\">\n\t\t\t<h4 class=\"name\">\n\t\t\t\t{{ file?.name }}\n\t\t\t</h4>\n\t\t\t<p class=\"size\">\n\t\t\t\t{{ formatBytes(file?.size, 0) }}\n\t\t\t</p>\n\t\t\t<easy-progress [progress]=\"file?.progress\"></easy-progress>\n\t\t</div>\n\n\t\t<div class=\"delete\" (click)=\"deleteFile(i)\">\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"18\" viewBox=\"0 0 14 18\">\n\t\t\t\t<path fill=\"#B1B1B1\" fill-rule=\"nonzero\"\n\t\t\t\t\td=\"M1 16c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v10zm3.17-7.83a.996.996 0 0 1 1.41 0L7 9.59l1.42-1.42a.996.996 0 1 1 1.41 1.41L8.41 11l1.42 1.42a.996.996 0 1 1-1.41 1.41L7 12.41l-1.42 1.42a.996.996 0 1 1-1.41-1.41L5.59 11 4.17 9.58a.996.996 0 0 1 0-1.41zM10.5 1L9.79.29C9.61.11 9.35 0 9.09 0H4.91c-.26 0-.52.11-.7.29L3.5 1H1c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1h-2.5z\" />\n\t\t\t</svg>\n\t\t</div>\n\t</div>\n</div>\n","styles":[".container{width:450px;height:200px;padding:2rem;text-align:center;border:dashed 1px #979797;position:relative;margin:0 auto}.container input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;top:0;left:0}.container label{color:#fff;width:183px;height:44px;border-radius:21.5px;background-color:#db202f;padding:8px 16px}.container h3{font-size:20px;font-weight:600;color:#38424c}.fileover{-webkit-animation:shake 1s;animation:shake 1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.files-list{margin-top:1.5rem}.files-list .single-file{padding:.5rem;justify-content:space-between;align-items:center;border:dashed 1px #979797;margin-bottom:1rem;display:flex;flex-grow:1}.files-list .single-file .delete{display:flex;margin-left:.5rem;cursor:pointer;align-self:flex-end}.files-list .single-file .name{font-size:14px;font-weight:500;color:#353f4a;margin:0}.files-list .single-file .size{font-size:12px;font-weight:500;color:#a4a4a4;margin:0 0 .25rem}.files-list .single-file .info{width:100%}@-webkit-keyframes shake{0%{transform:translate(1px,1px) rotate(0)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0)}to{transform:translate(1px,-2px) rotate(-1deg)}}@keyframes shake{0%{transform:translate(1px,1px) rotate(0)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0)}to{transform:translate(1px,-2px) rotate(-1deg)}}\n"]}]}],"members":{"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"allowedFiles":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"fileLimit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"allowMultiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":3}}]}],"droppedFiles":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":64,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"onFileDropped":[{"__symbolic":"method"}],"fileBrowseHandler":[{"__symbolic":"method"}],"deleteFile":[{"__symbolic":"method"}],"uploadFilesSimulator":[{"__symbolic":"method"}],"prepareFilesList":[{"__symbolic":"method"}],"formatBytes":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[easyDnDFileUpload]"}]}],"members":{"fileOver":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":7,"character":3},"arguments":["class.fileover"]}]}],"fileDropped":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":8,"character":3}}]}],"onDragOver":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":11,"character":3},"arguments":["dragover",["$event"]]}]}],"onDragLeave":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":18,"character":3},"arguments":["dragleave",["$event"]]}]}],"ondrop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":25,"character":3},"arguments":["drop",["$event"]]}]}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"easy-progress","template":"<div class=\"progress-cont\">\n  <div class=\"progress\" [style.width]=\"progress + '%'\">\n  </div>\n</div>","styles":[".progress-cont{height:7px;width:100%;border-radius:4px;background-color:#d0d0d0;position:relative}.progress-cont .progress{width:0;height:100%;position:absolute;z-index:1;top:0;left:0;border-radius:4px;background-color:#4c97cb;transition:.5s all}\n"]}]}],"members":{"progress":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}}},"origins":{"EasyDragAndDropFileUploadService":"./lib/easy-drag-and-drop-file-upload.service","EasyDragAndDropFileUploadComponent":"./lib/easy-drag-and-drop-file-upload.component","EasyDragAndDropFileUploadModule":"./lib/easy-drag-and-drop-file-upload.module","EasyDndUploadComponent":"./lib/easy-dnd-upload/easy-dnd-upload.component","ɵa":"./lib/easy-drag-and-drop-file-upload.directive","ɵb":"./lib/progress/progress.component"},"importAs":"easy-drag-and-drop-file-upload"}