ngx-uploader-wrapper
Version:
An Angular component wrapper for ngx-uploader
196 lines • 15 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { Component, Input, Output, EventEmitter, Pipe } from '@angular/core';
import { humanizeBytes, UploadStatus } from 'ngx-uploader';
var NgxUploaderWrapperComponent = /** @class */ (function () {
function NgxUploaderWrapperComponent() {
this.filesUploaded = [];
this.concurrency = 1;
this.maxUploads = 20;
this.accept = '*';
this.auto = true;
this.dragText = 'Drag files here to upload.';
this.browseText = 'Browse';
this.fileUploadText = 'Upload';
this.filePendingText = 'Pending';
this.fileUploadingText = 'Uploading...';
this.fileDoneText = 'Done';
this.onFileEvent = new EventEmitter();
this.files = [];
this.uploadInput = new EventEmitter();
this.humanizeBytes = humanizeBytes;
}
NgxUploaderWrapperComponent.prototype.ngOnInit = function () {
this.options = { concurrency: this.concurrency, allowedContentTypes: this.accept.split('|'), maxUploads: this.maxUploads };
if (!this.url || this.url.length === 0)
console.error('File Uploader requires url parameter to be set');
};
NgxUploaderWrapperComponent.prototype.onUploadOutput = function (output) {
var _this = this;
this.onFileEvent.emit(output);
if (output.type === 'allAddedToQueue' && this.auto) {
var event_1 = {
type: 'uploadAll',
url: this.url,
method: this.method,
data: this.data,
headers: this.headers
};
this.uploadInput.emit(event_1);
}
else if (output.type === 'addedToQueue' && typeof output.file !== 'undefined') {
this.files.push(output.file);
}
else if (output.type === 'uploading' && typeof output.file !== 'undefined') {
var index = this.files.findIndex(function (file) { return typeof output.file !== 'undefined' && file.id === output.file.id; });
this.files[index] = output.file;
}
else if (output.type === 'removed') {
this.files = this.files.filter(function (file) { return file !== output.file; });
}
else if (output.type === 'dragOver') {
this.dragOver = true;
}
else if (output.type === 'dragOut') {
this.dragOver = false;
}
else if (output.type === 'drop') {
this.dragOver = false;
}
else if (output.type === 'rejected' && typeof output.file !== 'undefined') {
console.log(output.file.name + ' rejected');
}
this.files = this.files.filter(function (file) {
if (file.progress.status === UploadStatus.Done) {
console.log('UploadedFile', file);
_this.filesUploaded.push(file);
}
return file.progress.status !== UploadStatus.Done;
});
};
NgxUploaderWrapperComponent.prototype.startUpload = function () {
var event = {
type: 'uploadAll',
url: this.url,
method: this.method,
data: this.data,
headers: this.headers
};
this.uploadInput.emit(event);
};
NgxUploaderWrapperComponent.prototype.cancelUpload = function (id) {
this.uploadInput.emit({ type: 'cancel', id: id });
};
NgxUploaderWrapperComponent.prototype.removeFile = function (id) {
this.uploadInput.emit({ type: 'remove', id: id });
};
NgxUploaderWrapperComponent.prototype.removeAllFiles = function () {
this.uploadInput.emit({ type: 'removeAll' });
this.filesUploaded = [];
};
NgxUploaderWrapperComponent.prototype.uploadFile = function (file, index) {
if (index === void 0) { index = 0; }
this.uploadInput.emit({
type: 'uploadFile',
file: this.files[index || file.fileIndex],
url: this.url,
method: this.method,
data: this.data,
headers: this.headers
});
};
__decorate([
Input(),
__metadata("design:type", Number)
], NgxUploaderWrapperComponent.prototype, "concurrency", void 0);
__decorate([
Input(),
__metadata("design:type", Number)
], NgxUploaderWrapperComponent.prototype, "maxUploads", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], NgxUploaderWrapperComponent.prototype, "method", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], NgxUploaderWrapperComponent.prototype, "url", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], NgxUploaderWrapperComponent.prototype, "data", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], NgxUploaderWrapperComponent.prototype, "headers", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], NgxUploaderWrapperComponent.prototype, "accept", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], NgxUploaderWrapperComponent.prototype, "auto", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], NgxUploaderWrapperComponent.prototype, "dragText", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], NgxUploaderWrapperComponent.prototype, "browseText", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], NgxUploaderWrapperComponent.prototype, "fileUploadText", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], NgxUploaderWrapperComponent.prototype, "filePendingText", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], NgxUploaderWrapperComponent.prototype, "fileUploadingText", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], NgxUploaderWrapperComponent.prototype, "fileDoneText", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], NgxUploaderWrapperComponent.prototype, "onFileEvent", void 0);
NgxUploaderWrapperComponent = __decorate([
Component({
selector: 'ngx-uploader-wrapper',
template: "\n <div class=\"upload-box\">\n <div class=\"upload-box-content\">\n <div class=\"drop-container\" ngFileDrop [options]=\"options\" (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\n <span [innerHTML]=\"dragText\"></span>\n <label class=\"upload-button\">\n <input type=\"file\" ngFileSelect [options]=\"options\" (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\" [accept]=\"accept\" multiple> {{ browseText }}\n </label>\n </div>\n <div class=\"upload-item\" *ngFor=\"let f of files | merge:filesUploaded; let i = index;\">\n <div class=\"upload-item-content\">\n <div class=\"filename\">\n <i class=\"ionicon ion-ios-copy\"></i>\n <span>{{ f.name }}</span>\n </div>\n <div class=\"progress-content\">\n <div class=\"progress\">\n <span class=\"bar\" [style.width]=\"f?.progress?.data?.percentage + '%'\" [class.is-done]=\"f?.progress?.data?.percentage === 100\"></span>\n <span class=\"upload\" *ngIf=\"f.progress?.data?.startTime === null && !auto\" (click)=\"uploadFile(f, i)\">\n <i class=\"ionicon ion-ios-cloud-upload\"></i> {{ fileUploadText }}\n </span>\n </div>\n </div>\n <div class=\"progress-text-content\">\n <span class=\"progress-text\" [class.is-done]=\"f?.progress?.data?.percentage === 100\">\n <span>{{ f.progress?.data?.percentage }}% </span>\n <span *ngIf=\"f.progress?.data?.percentage === 0\" [innerHTML]=\"filePendingText\"></span>\n <span *ngIf=\"f.progress?.data?.percentage !== 0 && f.progress?.data?.percentage !== 100\" [innerHTML]=\"fileUploadingText\"></span>\n <span *ngIf=\"f.progress?.data?.percentage === 100\" [innerHTML]=\"fileDoneText\"></span>\n </span>\n <span class=\"speed-and-eta-text\" *ngIf=\"f.progress?.data?.startTime !== null && f.progress?.data?.endTime === null\">\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>{{ f.progress?.data?.etaHuman }}</span>\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n ",
styles: ["\n .hero {\n background: transparent;\n }\n\n .upload-box {\n width: 100%;\n height: auto;\n display: inline-block;\n border-radius: 10px;\n background: white;\n }\n\n .upload-box .upload-box-content .upload-item, .upload-box .upload-box-content .drop-container {\n width: 100%;\n height: 150px;\n }\n\n .upload-box .upload-box-content .drop-container {\n display: flex;\n align-items: center;\n justify-content: center;\n width: calc(100% - 8px - 8px);\n border: 4px dashed #555;\n margin: 8px;\n }\n\n .upload-box .upload-box-content .drop-container span {\n font-size: 16px;\n font-weight: 400;\n color: #8793A2;\n }\n\n .upload-box .upload-box-content .drop-container .upload-button {\n display: inline-block;\n border: none;\n outline: none;\n cursor: pointer;\n font-weight: 600;\n padding: 0 2px;\n }\n\n .upload-box .upload-box-content .drop-container .upload-button input {\n display: none;\n }\n\n .upload-box .upload-box-content .upload-item {\n display: flex;\n align-items: center;\n }\n\n .upload-box .upload-box-content .upload-item .upload-item-content {\n width: 100%;\n }\n\n .upload-box .upload-box-content .upload-item .upload-item-content .filename {\n display: flex;\n align-items: center;\n margin: 0 30px;\n }\n\n .upload-box .upload-box-content .upload-item .upload-item-content .filename i {\n color: #8793A2;\n opacity: .8;\n font-size: 24px;\n margin-right: 12px;\n }\n\n .upload-box .upload-box-content .upload-item .upload-item-content .filename span {\n color: #8793A2;\n font-size: 14px;\n font-weight: 400;\n }\n\n .upload-box .upload-box-content .upload-item .upload-item-content .progress-content {\n display: flex;\n align-items: center;\n margin: 10px 30px;\n }\n\n .upload-box .upload-box-content .upload-item .upload-item-content .progress-content .progress {\n display: block;\n position: relative;\n width: 100%;\n height: 18px;\n border-radius: 10px;\n background: #dcdcdc;\n }\n\n .upload-box .upload-box-content .upload-item .upload-item-content .progress-content .progress .bar {\n position: absolute;\n top: 0;\n left: 0;\n height: inherit;\n background: linear-gradient(90deg, #13ebff 0%, #6cefbd 100%);\n border-top-left-radius: inherit;\n border-bottom-left-radius: inherit;\n }\n\n .upload-box .upload-box-content .upload-item .upload-item-content .progress-content .progress .bar.is-done {\n background: #a0d100;\n border-top-right-radius: inherit;\n border-bottom-right-radius: inherit;\n }\n\n .upload-box .upload-box-content .upload-item .upload-item-content .progress-content .progress .upload {\n border-top-right-radius: inherit;\n border-bottom-right-radius: inherit;\n position: absolute;\n top: 0;\n right: 0;\n height: inherit;\n width: 100px;\n background: #86af00;\n font-size: 14px;\n padding: 0 10px;\n cursor: pointer;\n color: white;\n }\n\n .upload-box .upload-box-content .upload-item .upload-item-content .progress-content .progress .upload:hover {\n background: #638201;\n }\n\n .upload-box .upload-box-content .upload-item .upload-item-content .progress-text-content {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 10px 30px 0;\n }\n\n .upload-box .upload-box-content .upload-item .upload-item-content .progress-text-content .progress-text {\n font-size: 13px;\n font-weight: 600;\n color: #4250f4;\n transition: color 200ms ease-out;\n }\n\n .upload-box .upload-box-content .upload-item .upload-item-content .progress-text-content .progress-text.is-done {\n color: #a0d100;\n }\n\n .upload-box .upload-box-content .upload-item .upload-item-content .progress-text-content .speed-and-eta-text {\n font-size: 13px;\n font-weight: 600;\n color: #8793A2;\n }\n\n .upload-box .help-text {\n width: 100%;\n display: inline-block;\n padding: 10px 30px;\n font-size: 12px;\n color: #8793A2;\n box-shadow: inset 0 20px 20px -20px rgba(0, 0, 0, 0.6);\n }\n\n .upload-box .help-text span {\n display: block;\n text-align: center;\n margin: 5px 0;\n }\n\n .upload-box .help-text span img {\n display: block;\n width: 30px;\n margin: 0 auto 5px auto;\n }\n "]
}),
__metadata("design:paramtypes", [])
], NgxUploaderWrapperComponent);
return NgxUploaderWrapperComponent;
}());
export { NgxUploaderWrapperComponent };
var MergePipe = /** @class */ (function () {
function MergePipe() {
}
MergePipe.prototype.transform = function (arr1, arr2) {
if (arr2 === void 0) { arr2 = []; }
if (arr1.length > 0 || arr2.length > 0)
return arr1 = arr1.concat(arr2);
};
MergePipe = __decorate([
Pipe({
name: 'merge'
})
], MergePipe);
return MergePipe;
}());
export { MergePipe };
//# sourceMappingURL=ngx-uploader-wrapper.component.js.map