easy-drag-and-drop-file-upload
Version:
Drag and Drop based file upload for Angular
133 lines • 18.8 kB
JavaScript
import { Component, Output, EventEmitter, Input } from '@angular/core';
export class EasyDndUploadComponent {
constructor() {
this.files = [];
/*************************************************************
* Input() memebrs
*************************************************************/
// Title
this._title = "Drag and Drop File Upload"; // default title
// Allow file types
this._allowedFiles = "*"; // Deafult allowed any type of file
// File Limit
this._fileLimit = -1; // Allow any size of file
// Multiple file
this._allowMultiple = true; // Allow multiple files by default
// Output
this.droppedFiles = new EventEmitter();
}
set title(value) {
this._title = value;
//console.log(`title is changed to ${value}`);
}
get title() {
return this._title;
}
set allowedFiles(value) {
this._allowedFiles = value;
//console.log(`Allowed files is changed to ${value}`);
}
get allowedFiles() {
return this._allowedFiles;
}
set fileLimit(value) {
this._fileLimit = value;
//console.log(`file limit is changed to ${value}`);
}
get fileLimit() {
return this._fileLimit;
}
set allowMultiple(value) {
this._allowMultiple = value;
//console.log(`allow multiple is changed to ${value}`);
}
get allowMultiple() {
return this._allowMultiple;
}
ngOnInit() { }
/**
* on file drop handler
*/
onFileDropped($event) {
this.prepareFilesList($event);
}
/**
* handle file from browsing
*/
fileBrowseHandler(files) {
this.prepareFilesList(files);
}
/**
* Delete file from files list
* @param index (File index)
*/
deleteFile(index) {
this.files.splice(index, 1);
this.droppedFiles.emit(this.files);
}
/**
* Simulate the upload process
*/
uploadFilesSimulator(index) {
setTimeout(() => {
if (index === this.files.length) {
return;
}
else {
const progressInterval = setInterval(() => {
if (this.files[index].progress === 100) {
clearInterval(progressInterval);
this.uploadFilesSimulator(index + 1);
}
else {
this.files[index].progress += 5;
}
}, 200);
this.droppedFiles.emit(this.files);
}
}, 1000);
}
/**
* Convert Files list to normal array list
* @param files (Files List)
*/
prepareFilesList(files) {
for (const item of files) {
item.progress = 0;
this.files.push(item);
}
this.uploadFilesSimulator(0);
}
/**
* format bytes
* @param bytes (File size in bytes)
* @param decimals (Decimals point)
*/
formatBytes(bytes, decimals) {
if (bytes === 0) {
return '0 Bytes';
}
const k = 1024;
const dm = decimals <= 0 ? 0 : decimals || 2;
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}
}
EasyDndUploadComponent.decorators = [
{ type: Component, args: [{
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"]
},] }
];
/** @nocollapse */
EasyDndUploadComponent.ctorParameters = () => [];
EasyDndUploadComponent.propDecorators = {
title: [{ type: Input }],
allowedFiles: [{ type: Input }],
fileLimit: [{ type: Input }],
allowMultiple: [{ type: Input }],
droppedFiles: [{ type: Output }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWFzeS1kbmQtdXBsb2FkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Vhc3ktZHJhZy1hbmQtZHJvcC1maWxlLXVwbG9hZC9zcmMvbGliL2Vhc3ktZG5kLXVwbG9hZC9lYXN5LWRuZC11cGxvYWQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsTUFBTSxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFRL0UsTUFBTSxPQUFPLHNCQUFzQjtJQTJEakM7UUF6REEsVUFBSyxHQUFVLEVBQUUsQ0FBQztRQUVsQjs7dUVBRStEO1FBQy9ELFFBQVE7UUFDQSxXQUFNLEdBQVUsMkJBQTJCLENBQUMsQ0FBQyxnQkFBZ0I7UUFXckUsbUJBQW1CO1FBQ1gsa0JBQWEsR0FBVSxHQUFHLENBQUMsQ0FBQyxtQ0FBbUM7UUFXdkUsYUFBYTtRQUNMLGVBQVUsR0FBVyxDQUFDLENBQUMsQ0FBQyxDQUFDLHlCQUF5QjtRQVcxRCxnQkFBZ0I7UUFDUixtQkFBYyxHQUFZLElBQUksQ0FBQyxDQUFDLGtDQUFrQztRQVcxRSxTQUFTO1FBQ0MsaUJBQVksR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO0lBR2pDLENBQUM7SUFsRGpCLElBQ0ksS0FBSyxDQUFDLEtBQWE7UUFDckIsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUM7UUFDcEIsOENBQThDO0lBQ2hELENBQUM7SUFFRCxJQUFJLEtBQUs7UUFDUCxPQUFPLElBQUksQ0FBQyxNQUFNLENBQUM7SUFDckIsQ0FBQztJQUlELElBQ0ksWUFBWSxDQUFDLEtBQWE7UUFDNUIsSUFBSSxDQUFDLGFBQWEsR0FBRyxLQUFLLENBQUM7UUFDM0Isc0RBQXNEO0lBQ3hELENBQUM7SUFFRCxJQUFJLFlBQVk7UUFDZCxPQUFPLElBQUksQ0FBQyxhQUFhLENBQUM7SUFDNUIsQ0FBQztJQUlELElBQ0ksU0FBUyxDQUFDLEtBQWE7UUFDekIsSUFBSSxDQUFDLFVBQVUsR0FBRyxLQUFLLENBQUM7UUFDeEIsbURBQW1EO0lBQ3JELENBQUM7SUFFRCxJQUFJLFNBQVM7UUFDWCxPQUFPLElBQUksQ0FBQyxVQUFVLENBQUM7SUFDekIsQ0FBQztJQUlELElBQ0ksYUFBYSxDQUFDLEtBQWM7UUFDOUIsSUFBSSxDQUFDLGNBQWMsR0FBRyxLQUFLLENBQUM7UUFDNUIsdURBQXVEO0lBQ3pELENBQUM7SUFFRCxJQUFJLGFBQWE7UUFDZixPQUFPLElBQUksQ0FBQyxjQUFjLENBQUM7SUFDN0IsQ0FBQztJQVFELFFBQVEsS0FBSSxDQUFDO0lBR2I7O09BRUc7SUFDSCxhQUFhLENBQUMsTUFBTTtRQUNsQixJQUFJLENBQUMsZ0JBQWdCLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDaEMsQ0FBQztJQUVEOztPQUVHO0lBQ0gsaUJBQWlCLENBQUMsS0FBSztRQUNyQixJQUFJLENBQUMsZ0JBQWdCLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDL0IsQ0FBQztJQUVEOzs7T0FHRztJQUNILFVBQVUsQ0FBQyxLQUFhO1FBQ3RCLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUMsQ0FBQztRQUM1QixJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDckMsQ0FBQztJQUVEOztPQUVHO0lBQ0gsb0JBQW9CLENBQUMsS0FBYTtRQUNoQyxVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2QsSUFBSSxLQUFLLEtBQUssSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLEVBQUU7Z0JBQy9CLE9BQU87YUFDUjtpQkFBTTtnQkFDTCxNQUFNLGdCQUFnQixHQUFHLFdBQVcsQ0FBQyxHQUFHLEVBQUU7b0JBQ3hDLElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQyxRQUFRLEtBQUssR0FBRyxFQUFFO3dCQUN0QyxhQUFhLENBQUMsZ0JBQWdCLENBQUMsQ0FBQzt3QkFDaEMsSUFBSSxDQUFDLG9CQUFvQixDQUFDLEtBQUssR0FBRyxDQUFDLENBQUMsQ0FBQztxQkFDdEM7eUJBQU07d0JBQ0wsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQyxRQUFRLElBQUksQ0FBQyxDQUFDO3FCQUNqQztnQkFDSCxDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUM7Z0JBQ1IsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO2FBQ3BDO1FBQ0gsQ0FBQyxFQUFFLElBQUksQ0FBQyxDQUFDO0lBQ1gsQ0FBQztJQUVEOzs7T0FHRztJQUNILGdCQUFnQixDQUFDLEtBQWlCO1FBQ2hDLEtBQUssTUFBTSxJQUFJLElBQUksS0FBSyxFQUFFO1lBQ3hCLElBQUksQ0FBQyxRQUFRLEdBQUcsQ0FBQyxDQUFDO1lBQ2xCLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1NBQ3ZCO1FBQ0QsSUFBSSxDQUFDLG9CQUFvQixDQUFDLENBQUMsQ0FBQyxDQUFDO0lBQy9CLENBQUM7SUFFRDs7OztPQUlHO0lBQ0gsV0FBVyxDQUFDLEtBQUssRUFBRSxRQUFRO1FBQ3pCLElBQUksS0FBSyxLQUFLLENBQUMsRUFBRTtZQUNmLE9BQU8sU0FBUyxDQUFDO1NBQ2xCO1FBQ0QsTUFBTSxDQUFDLEdBQUcsSUFBSSxDQUFDO1FBQ2YsTUFBTSxFQUFFLEdBQUcsUUFBUSxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxRQUFRLElBQUksQ0FBQyxDQUFDO1FBQzdDLE1BQU0sS0FBSyxHQUFHLENBQUMsT0FBTyxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLElBQUksRUFBRSxJQUFJLENBQUMsQ0FBQztRQUN4RSxNQUFNLENBQUMsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ3BELE9BQU8sVUFBVSxDQUFDLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLEVBQUUsQ0FBQyxDQUFDLEdBQUcsR0FBRyxHQUFHLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUMzRSxDQUFDOzs7WUEzSUYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxxQkFBcUI7Z0JBQy9CLHF6SEFBK0M7O2FBRWhEOzs7OztvQkFVRSxLQUFLOzJCQVlMLEtBQUs7d0JBWUwsS0FBSzs0QkFZTCxLQUFLOzJCQVdMLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbmd4LWVhc3ktZG5kLXVwbG9hZCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9lYXN5LWRuZC11cGxvYWQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9lYXN5LWRuZC11cGxvYWQuY29tcG9uZW50LmNzcyddXG59KVxuZXhwb3J0IGNsYXNzIEVhc3lEbmRVcGxvYWRDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuXG4gIGZpbGVzOiBhbnlbXSA9IFtdO1xuXG4gIC8qKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqXG4gICAqIElucHV0KCkgbWVtZWJyc1xuICAgKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKi9cbiAgLy8gVGl0bGVcbiAgcHJpdmF0ZSBfdGl0bGU6c3RyaW5nID0gXCJEcmFnIGFuZCBEcm9wIEZpbGUgVXBsb2FkXCI7IC8vIGRlZmF1bHQgdGl0bGVcbiAgQElucHV0KClcbiAgc2V0IHRpdGxlKHZhbHVlOiBzdHJpbmcpIHtcbiAgICB0aGlzLl90aXRsZSA9IHZhbHVlOyAgICBcbiAgICAvL2NvbnNvbGUubG9nKGB0aXRsZSBpcyBjaGFuZ2VkIHRvICR7dmFsdWV9YCk7XG4gIH1cblxuICBnZXQgdGl0bGUoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy5fdGl0bGU7XG4gIH1cblxuICAvLyBBbGxvdyBmaWxlIHR5cGVzXG4gIHByaXZhdGUgX2FsbG93ZWRGaWxlczpzdHJpbmcgPSBcIipcIjsgLy8gRGVhZnVsdCBhbGxvd2VkIGFueSB0eXBlIG9mIGZpbGVcbiAgQElucHV0KClcbiAgc2V0IGFsbG93ZWRGaWxlcyh2YWx1ZTogc3RyaW5nKSB7XG4gICAgdGhpcy5fYWxsb3dlZEZpbGVzID0gdmFsdWU7ICAgIFxuICAgIC8vY29uc29sZS5sb2coYEFsbG93ZWQgZmlsZXMgaXMgY2hhbmdlZCB0byAke3ZhbHVlfWApO1xuICB9XG5cbiAgZ2V0IGFsbG93ZWRGaWxlcygpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLl9hbGxvd2VkRmlsZXM7XG4gIH1cblxuICAvLyBGaWxlIExpbWl0XG4gIHByaXZhdGUgX2ZpbGVMaW1pdDogbnVtYmVyID0gLTE7IC8vIEFsbG93IGFueSBzaXplIG9mIGZpbGVcbiAgQElucHV0KClcbiAgc2V0IGZpbGVMaW1pdCh2YWx1ZTogbnVtYmVyKSB7XG4gICAgdGhpcy5fZmlsZUxpbWl0ID0gdmFsdWU7ICAgIFxuICAgIC8vY29uc29sZS5sb2coYGZpbGUgbGltaXQgaXMgY2hhbmdlZCB0byAke3ZhbHVlfWApO1xuICB9XG5cbiAgZ2V0IGZpbGVMaW1pdCgpOiBudW1iZXIge1xuICAgIHJldHVybiB0aGlzLl9maWxlTGltaXQ7XG4gIH1cblxuICAvLyBNdWx0aXBsZSBmaWxlXG4gIHByaXZhdGUgX2FsbG93TXVsdGlwbGU6IGJvb2xlYW4gPSB0cnVlOyAvLyBBbGxvdyBtdWx0aXBsZSBmaWxlcyBieSBkZWZhdWx0XG4gIEBJbnB1dCgpXG4gIHNldCBhbGxvd011bHRpcGxlKHZhbHVlOiBib29sZWFuKSB7XG4gICAgdGhpcy5fYWxsb3dNdWx0aXBsZSA9IHZhbHVlOyAgICBcbiAgICAvL2NvbnNvbGUubG9nKGBhbGxvdyBtdWx0aXBsZSBpcyBjaGFuZ2VkIHRvICR7dmFsdWV9YCk7XG4gIH1cblxuICBnZXQgYWxsb3dNdWx0aXBsZSgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5fYWxsb3dNdWx0aXBsZTtcbiAgfVxuXG4gIC8vIE91dHB1dFxuICBAT3V0cHV0KCkgZHJvcHBlZEZpbGVzID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG5cblxuICBjb25zdHJ1Y3RvcigpIHsgfVxuXG4gIG5nT25Jbml0KCkge31cblxuXG4gIC8qKlxuICAgKiBvbiBmaWxlIGRyb3AgaGFuZGxlclxuICAgKi9cbiAgb25GaWxlRHJvcHBlZCgkZXZlbnQpIHtcbiAgICB0aGlzLnByZXBhcmVGaWxlc0xpc3QoJGV2ZW50KTtcbiAgfVxuXG4gIC8qKlxuICAgKiBoYW5kbGUgZmlsZSBmcm9tIGJyb3dzaW5nXG4gICAqL1xuICBmaWxlQnJvd3NlSGFuZGxlcihmaWxlcykge1xuICAgIHRoaXMucHJlcGFyZUZpbGVzTGlzdChmaWxlcyk7XG4gIH1cblxuICAvKipcbiAgICogRGVsZXRlIGZpbGUgZnJvbSBmaWxlcyBsaXN0XG4gICAqIEBwYXJhbSBpbmRleCAoRmlsZSBpbmRleClcbiAgICovXG4gIGRlbGV0ZUZpbGUoaW5kZXg6IG51bWJlcikge1xuICAgIHRoaXMuZmlsZXMuc3BsaWNlKGluZGV4LCAxKTtcbiAgICB0aGlzLmRyb3BwZWRGaWxlcy5lbWl0KHRoaXMuZmlsZXMpO1xuICB9XG5cbiAgLyoqXG4gICAqIFNpbXVsYXRlIHRoZSB1cGxvYWQgcHJvY2Vzc1xuICAgKi9cbiAgdXBsb2FkRmlsZXNTaW11bGF0b3IoaW5kZXg6IG51bWJlcikge1xuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgaWYgKGluZGV4ID09PSB0aGlzLmZpbGVzLmxlbmd0aCkge1xuICAgICAgICByZXR1cm47XG4gICAgICB9IGVsc2Uge1xuICAgICAgICBjb25zdCBwcm9ncmVzc0ludGVydmFsID0gc2V0SW50ZXJ2YWwoKCkgPT4ge1xuICAgICAgICAgIGlmICh0aGlzLmZpbGVzW2luZGV4XS5wcm9ncmVzcyA9PT0gMTAwKSB7XG4gICAgICAgICAgICBjbGVhckludGVydmFsKHByb2dyZXNzSW50ZXJ2YWwpO1xuICAgICAgICAgICAgdGhpcy51cGxvYWRGaWxlc1NpbXVsYXRvcihpbmRleCArIDEpO1xuICAgICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICB0aGlzLmZpbGVzW2luZGV4XS5wcm9ncmVzcyArPSA1O1xuICAgICAgICAgIH1cbiAgICAgICAgfSwgMjAwKTtcbiAgICAgICAgdGhpcy5kcm9wcGVkRmlsZXMuZW1pdCh0aGlzLmZpbGVzKTtcbiAgICAgIH1cbiAgICB9LCAxMDAwKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBDb252ZXJ0IEZpbGVzIGxpc3QgdG8gbm9ybWFsIGFycmF5IGxpc3RcbiAgICogQHBhcmFtIGZpbGVzIChGaWxlcyBMaXN0KVxuICAgKi9cbiAgcHJlcGFyZUZpbGVzTGlzdChmaWxlczogQXJyYXk8YW55Pikge1xuICAgIGZvciAoY29uc3QgaXRlbSBvZiBmaWxlcykge1xuICAgICAgaXRlbS5wcm9ncmVzcyA9IDA7XG4gICAgICB0aGlzLmZpbGVzLnB1c2goaXRlbSk7XG4gICAgfVxuICAgIHRoaXMudXBsb2FkRmlsZXNTaW11bGF0b3IoMCk7XG4gIH1cblxuICAvKipcbiAgICogZm9ybWF0IGJ5dGVzXG4gICAqIEBwYXJhbSBieXRlcyAoRmlsZSBzaXplIGluIGJ5dGVzKVxuICAgKiBAcGFyYW0gZGVjaW1hbHMgKERlY2ltYWxzIHBvaW50KVxuICAgKi9cbiAgZm9ybWF0Qnl0ZXMoYnl0ZXMsIGRlY2ltYWxzKSB7XG4gICAgaWYgKGJ5dGVzID09PSAwKSB7XG4gICAgICByZXR1cm4gJzAgQnl0ZXMnO1xuICAgIH1cbiAgICBjb25zdCBrID0gMTAyNDtcbiAgICBjb25zdCBkbSA9IGRlY2ltYWxzIDw9IDAgPyAwIDogZGVjaW1hbHMgfHwgMjtcbiAgICBjb25zdCBzaXplcyA9IFsnQnl0ZXMnLCAnS0InLCAnTUInLCAnR0InLCAnVEInLCAnUEInLCAnRUInLCAnWkInLCAnWUInXTtcbiAgICBjb25zdCBpID0gTWF0aC5mbG9vcihNYXRoLmxvZyhieXRlcykgLyBNYXRoLmxvZyhrKSk7XG4gICAgcmV0dXJuIHBhcnNlRmxvYXQoKGJ5dGVzIC8gTWF0aC5wb3coaywgaSkpLnRvRml4ZWQoZG0pKSArICcgJyArIHNpemVzW2ldO1xuICB9XG5cblxufVxuIl19