UNPKG

ngx-uploader-directive

Version:

Angular File Uploader Directive which provides two directives, which are select and file drag and drop to upload files on server.

1,043 lines (1,039 loc) 52.6 kB
(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common/http'), require('rxjs'), require('rxjs/operators')) : typeof define === 'function' && define.amd ? define('ngx-uploader-directive', ['exports', '@angular/core', '@angular/common/http', 'rxjs', 'rxjs/operators'], factory) : (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['ngx-uploader-directive'] = {}, global.ng.core, global.ng.common.http, global.rxjs, global.rxjs.operators)); }(this, (function (exports, core, http, rxjs, operators) { 'use strict'; /** * @fileoverview added by tsickle * Generated from: lib/configs/config.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** @type {?} */ var environment = { production: true }; /** * @fileoverview added by tsickle * Generated from: lib/services/ngx-uploader-directive.service.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ // @Injectable({ // providedIn: 'root' // }) var NgxUploaderDirectiveService = /** @class */ (function () { /** * @param {?=} requestConcurrency * @param {?=} maxFilesToAddInSingleRequest * @param {?=} fileTypes * @param {?=} maxFileUploads * @param {?=} maxFileSize * @param {?=} httpClient * @param {?=} logs */ function NgxUploaderDirectiveService(requestConcurrency, maxFilesToAddInSingleRequest, fileTypes, maxFileUploads, maxFileSize, httpClient, logs) { var _this = this; if (requestConcurrency === void 0) { requestConcurrency = Number.POSITIVE_INFINITY; } if (maxFilesToAddInSingleRequest === void 0) { maxFilesToAddInSingleRequest = Number.POSITIVE_INFINITY; } if (fileTypes === void 0) { fileTypes = ['*']; } if (maxFileUploads === void 0) { maxFileUploads = Number.POSITIVE_INFINITY; } if (maxFileSize === void 0) { maxFileSize = Number.POSITIVE_INFINITY; } this.httpClient = httpClient; this.logs = logs; this.devEnv = !environment.production; this.queue = new Array(); this.MaxNumberOfRequest = 10; this.fileServiceEvents = new core.EventEmitter(); this.uploadScheduler = new rxjs.Subject(); this.maxFilesToAddInSingleRequest = 0; this.fileTypes = fileTypes; this.maxFileUploads = maxFileUploads; this.maxFilesToAddInSingleRequest = maxFilesToAddInSingleRequest; this.maxFileSize = maxFileSize; this.subscriptions = new Array(); this.uploadScheduler .pipe(operators.mergeMap(( /** * @param {?} upload * @return {?} */function (/** * @param {?} upload * @return {?} */ upload) { return _this.startUpload(upload); }), requestConcurrency === 0 ? this.MaxNumberOfRequest : requestConcurrency)) .subscribe(( /** * @param {?} uploadOutput * @return {?} */function (/** * @param {?} uploadOutput * @return {?} */ uploadOutput) { return _this.fileServiceEvents.emit(uploadOutput); })); } /** * Handles uploaded files * @param {?} selectedFiles Selected Files * @param {?} selectedEventType * @return {?} */ NgxUploaderDirectiveService.prototype.handleSelectedFiles = function (selectedFiles, selectedEventType) { this.queue = new Array(); this.fileServiceEvents.emit({ type: 'init', fileSelectedEventType: selectedEventType }); if (selectedFiles.length > this.maxFileUploads) { this.httpErrorResponse = new http.HttpErrorResponse({ status: 0, error: 'Maxium ' + this.maxFileUploads + ' files can be upload' }); this.fileServiceEvents.emit({ type: 'error', response: this.httpErrorResponse, fileSelectedEventType: selectedEventType }); return; } // verify files with allowed files and max uploads /** @type {?} */ var allowedFiles = new Array(); /** @type {?} */ var rejectedFiles = new Array(); // tslint:disable-next-line: prefer-for-of for (var checkingFileIndex = 0; checkingFileIndex < selectedFiles.length; checkingFileIndex++) { /** @type {?} */ var checkingFile = selectedFiles[checkingFileIndex]; /** @type {?} */ var queueLength = allowedFiles.length + this.queue.length + 1; if (this.isFileTypeAllowed(checkingFile.type) && this.isFileSizeAllowed(checkingFile.size)) { allowedFiles.push(checkingFile); } else { /** @type {?} */ var rejectedFile = this.convertToSelectedFile(checkingFile, checkingFileIndex, this.generateRandomeId(), selectedEventType); rejectedFiles.push(rejectedFile); } } if (rejectedFiles.length > 0) { this.httpErrorResponse = new http.HttpErrorResponse({ status: 0, error: 'Invalid file type or file size exceeded the limit ' + this.humanizeBytes(this.maxFileSize), statusText: 'Invalid Input' }); this.fileServiceEvents.emit({ type: 'rejected', files: rejectedFiles, fileSelectedEventType: selectedEventType, response: this.httpErrorResponse }); } if (this.logs) { console.info('Allowed Files', allowedFiles); } // Adding files to queue /** @type {?} */ var filesAddedToQueue; /** @type {?} */ var totalFilesAdded = new Array(); if (this.maxFilesToAddInSingleRequest === 0 || this.maxFilesToAddInSingleRequest === 1) { /** @type {?} */ var eventId = this.generateRandomeId(); // tslint:disable-next-line: prefer-for-of for (var fileIndex = 0; fileIndex < allowedFiles.length; fileIndex++) { /** @type {?} */ var file = allowedFiles[fileIndex]; /** @type {?} */ var selectedFile = void 0; if (this.maxFilesToAddInSingleRequest === 0) { selectedFile = this.convertToSelectedFile(file, fileIndex, eventId, selectedEventType); } else if (this.maxFilesToAddInSingleRequest === 1) { selectedFile = this.convertToSelectedFile(file, fileIndex, this.generateRandomeId(), selectedEventType); } this.queue.push(selectedFile); filesAddedToQueue = new Array(); filesAddedToQueue.push(selectedFile); totalFilesAdded.push(selectedFile); this.fileServiceEvents.emit({ type: 'addedToQueue', files: filesAddedToQueue, requestId: selectedFile.requestId, fileSelectedEventType: selectedEventType }); } } else { // generate id for max files to add in single request. /** @type {?} */ var chunkedArray = this.chunkArray(allowedFiles, this.maxFilesToAddInSingleRequest); /** @type {?} */ var fileIndex = 0; // tslint:disable-next-line: prefer-for-of for (var chukedQueueArrayIndex = 0; chukedQueueArrayIndex < chunkedArray.length; chukedQueueArrayIndex++) { /** @type {?} */ var chunkedElement = chunkedArray[chukedQueueArrayIndex]; /** @type {?} */ var eventId = this.generateRandomeId(); filesAddedToQueue = new Array(); // tslint:disable-next-line: prefer-for-of for (var chunkElementIndex = 0; chunkElementIndex < chunkedElement.length; chunkElementIndex++) { /** @type {?} */ var selectedFileElement = chunkedElement[chunkElementIndex]; /** @type {?} */ var convertdFile = this.convertToSelectedFile(selectedFileElement, fileIndex, eventId, selectedEventType); this.queue.push(convertdFile); filesAddedToQueue.push(convertdFile); totalFilesAdded.push(convertdFile); fileIndex += 1; } this.fileServiceEvents.emit({ type: 'addedToQueue', files: filesAddedToQueue, requestId: eventId, fileSelectedEventType: selectedEventType }); } } if (this.queue.length > 0) { this.fileServiceEvents.emit({ type: 'allAddedToQueue', files: totalFilesAdded, fileSelectedEventType: selectedEventType }); } if (this.logs) { console.info('Queue', this.queue); } }; /** * Handles input events upload | remove | cancel * @param {?} inputEvnets Input events of file upload process * @return {?} */ NgxUploaderDirectiveService.prototype.handleInputEvents = function (inputEvnets) { var _this = this; return inputEvnets.subscribe(( /** * @param {?} event * @return {?} */function (event) { if (_this.logs && _this.devEnv) { console.info('Input event', event); } if (_this.queue.length === 0) { return; } /** @type {?} */ var requestId = event.requestId; switch (event.type) { case 'uploadFile': if (!requestId) { _this.httpErrorResponse = new http.HttpErrorResponse({ status: 0, error: 'Invalid request id.', statusText: 'Invalid Input' }); _this.fileServiceEvents.emit({ type: 'error', response: _this.httpErrorResponse, fileSelectedEventType: 'ALL' }); return; } _this.uploadScheduler.next({ files: _this.queue.filter(( /** * @param {?} file * @return {?} */function (file) { return file.requestId === event.requestId; })), event: event }); break; case 'uploadAll': /** @type {?} */ var groupOfRequests = _this.groupByArray(_this.queue.filter(( /** * @param {?} file * @return {?} */function (file) { return file.progress.status === 'Queue'; })), 'requestId'); if (_this.logs) { console.info('Group of request', groupOfRequests); } for (var request in groupOfRequests) { if (groupOfRequests.hasOwnProperty(request)) { /** @type {?} */ var requestFiles = groupOfRequests[request]; if (_this.logs && _this.devEnv) { console.info('Requesting for id ' + request, requestFiles); } _this.uploadScheduler.next({ files: requestFiles, event: event }); } } break; case 'cancel': if (!requestId) { _this.httpErrorResponse = new http.HttpErrorResponse({ status: 0, error: 'Invalid request id.', statusText: 'Invalid Input' }); _this.fileServiceEvents.emit({ type: 'error', response: _this.httpErrorResponse, fileSelectedEventType: 'ALL' }); return; } /** @type {?} */ var subs_1 = _this.subscriptions.filter(( /** * @param {?} sub * @return {?} */function (/** * @param {?} sub * @return {?} */ sub) { return sub.id === requestId; })); if (_this.logs && _this.devEnv) { console.info('subscriptions ', subs_1); } subs_1.forEach(( /** * @param {?} sub * @return {?} */function (/** * @param {?} sub * @return {?} */ sub) { if (sub.sub) { sub.sub.unsubscribe(); // tslint:disable-next-line: no-shadowed-variable /** @type {?} */ var cancelledFilesArray = _this.queue.filter(( /** * @param {?} file * @return {?} */function (file) { return file.requestId === requestId; })); if (cancelledFilesArray.length > 0) { _this.queue.forEach(( /** * @param {?} file * @param {?} fileIndex * @param {?} queue * @return {?} */function (file, fileIndex, queue) { queue[fileIndex].progress.status = 'Cancelled'; })); _this.fileServiceEvents.emit({ type: 'cancelled', requestId: requestId, files: cancelledFilesArray, fileSelectedEventType: cancelledFilesArray[0].selectedEventType }); } else { _this.httpErrorResponse = new http.HttpErrorResponse({ status: 0, error: 'Files not found with request id ' + requestId }); _this.fileServiceEvents.emit({ type: 'error', response: _this.httpErrorResponse, fileSelectedEventType: 'ALL' }); } } })); break; case 'cancelAll': _this.subscriptions.forEach(( /** * @param {?} sub * @return {?} */function (/** * @param {?} sub * @return {?} */ sub) { if (sub.sub) { sub.sub.unsubscribe(); } if (_this.logs && _this.devEnv) { console.info('subscriptions ', subs_1); } /** @type {?} */ var canceldFileArray = _this.queue.filter(( /** * @param {?} uploadFile * @return {?} */function (uploadFile) { return uploadFile.requestId === sub.id; })); if (canceldFileArray.length > 0) { _this.queue.forEach(( /** * @param {?} file * @param {?} fileIndex * @param {?} queue * @return {?} */function (file, fileIndex, queue) { queue[fileIndex].progress.status = 'Cancelled'; })); _this.fileServiceEvents.emit({ type: 'cancelled', files: canceldFileArray, fileSelectedEventType: canceldFileArray[0].selectedEventType }); } else { _this.httpErrorResponse = new http.HttpErrorResponse({ status: 0, error: 'Files not found with request id ' + requestId, statusText: 'Invalid Input' }); _this.fileServiceEvents.emit({ type: 'error', response: _this.httpErrorResponse, fileSelectedEventType: 'ALL' }); } })); break; case 'remove': if (!requestId) { _this.httpErrorResponse = new http.HttpErrorResponse({ status: 0, error: 'Invalid request id.', statusText: 'Invalid Input' }); _this.fileServiceEvents.emit({ type: 'error', response: _this.httpErrorResponse, fileSelectedEventType: 'ALL' }); return; } /** @type {?} */ var filesToRemove = _this.queue.filter(( /** * @param {?} file * @return {?} */function (file) { return file.requestId === event.requestId; })); if (filesToRemove.length > 0) { /** @type {?} */ var remainingFilesArray = _this.queue.filter(( /** * @param {?} file * @return {?} */function (file) { return file.requestId !== event.requestId; })); _this.queue = remainingFilesArray; _this.fileServiceEvents.emit({ type: 'removed', requestId: event.requestId, files: filesToRemove, fileSelectedEventType: 'ALL' }); } else { _this.httpErrorResponse = new http.HttpErrorResponse({ status: 0, error: 'Files not found with request id ' + requestId, statusText: 'Invalid Input' }); _this.fileServiceEvents.emit({ type: 'error', response: _this.httpErrorResponse, fileSelectedEventType: 'ALL' }); } break; case 'removeAll': if (_this.queue.length) { _this.queue = new Array(); _this.fileServiceEvents.emit({ type: 'removedAll', files: _this.queue, fileSelectedEventType: 'ALL' }); } break; } // Temporary taken reference number not in use any where if (NgxUploaderDirectiveService.inputEventReferenceNumber !== event.inputReferenceNumber) { NgxUploaderDirectiveService.inputEventReferenceNumber = event.inputReferenceNumber; } })); }; /** * Check for file type is valid or not * @param {?} mimeType file mime type * @return {?} */ NgxUploaderDirectiveService.prototype.isFileTypeAllowed = function (mimeType) { /** @type {?} */ var allAllowed = this.fileTypes.find(( /** * @param {?} type * @return {?} */function (type) { return type === '*'; })) !== undefined; if (allAllowed) { return true; } return this.fileTypes.find(( /** * @param {?} type * @return {?} */function (type) { return type === mimeType; })) !== undefined; }; /** * Start file upload * @param {?} upload object with files and upload input event * @return {?} */ NgxUploaderDirectiveService.prototype.startUpload = function (upload) { var _this = this; return new rxjs.Observable(( /** * @param {?} observer * @return {?} */function (/** * @param {?} observer * @return {?} */ observer) { /** @type {?} */ var sub = _this.uploadFilesHttpRequest(upload.files, upload.event) .pipe(operators.finalize(( /** * @return {?} */function () { if (!observer.closed) { observer.complete(); } }))) .subscribe(( /** * @param {?} output * @return {?} */function (/** * @param {?} output * @return {?} */ output) { observer.next(output); }), ( /** * @param {?} err * @return {?} */function (/** * @param {?} err * @return {?} */ err) { observer.error(err); observer.complete(); }), ( /** * @return {?} */function () { observer.complete(); })); _this.subscriptions.push({ id: upload.files[0].requestId, sub: sub }); if (_this.logs && _this.devEnv) { console.info('subscriptions ', _this.subscriptions); } })); }; /** * Upload files to server * @param {?} files Array of files input * @param {?} event Upload inout event * @return {?} */ NgxUploaderDirectiveService.prototype.uploadFilesHttpRequest = function (files, event) { var _this = this; return new rxjs.Observable(( /** * @param {?} observer * @return {?} */function (/** * @param {?} observer * @return {?} */ observer) { /** @type {?} */ var time = new Date().getTime(); /** @type {?} */ var speed = 0; /** @type {?} */ var eta = null; /** @type {?} */ var fileList = files; /** @type {?} */ var headers = event.headers || {}; if (_this.logs && _this.devEnv) { console.info('Files to Upload', fileList); } if (fileList.length > 0) { /** @type {?} */ var totalSize_1 = 0; files.forEach(( /** * @param {?} file * @param {?} index * @return {?} */function (file, index) { totalSize_1 += file.nativeFile.size; })); /** @type {?} */ var formData_1 = new FormData(); if (event.data !== undefined) { Object.keys(event.data).forEach(( /** * @param {?} key * @return {?} */function (/** * @param {?} key * @return {?} */ key) { return formData_1.append(key, event.data[key]); })); } if (fileList.length > 1) { // tslint:disable-next-line: prefer-for-of for (var fileIndex = 0; fileIndex < files.length; fileIndex++) { /** @type {?} */ var element = files[fileIndex]; formData_1.append('file_' + (fileIndex + 1), fileList[fileIndex].nativeFile, fileList[fileIndex].name); } } else { formData_1.append('file', fileList[0].nativeFile, fileList[0].name); } /** @type {?} */ var cancelledFiles = _this.queue.filter(( /** * @param {?} file * @return {?} */function (/** * @param {?} file * @return {?} */ file) { return file.requestId === fileList[0].requestId; })); if (cancelledFiles[0].progress.status === 'Cancelled') { observer.complete(); } observer.next({ type: 'start', requestId: files[0].requestId, files: files, fileSelectedEventType: files[0].selectedEventType }); /** @type {?} */ var req = new http.HttpRequest(event.method, event.url, formData_1, { headers: new http.HttpHeaders(headers), reportProgress: true }); /** @type {?} */ var httpRequestSubscription = _this.httpClient.request(req).subscribe(( // tslint:disable-next-line: no-shadowed-variable /** * @param {?} data * @return {?} */ function (data) { switch (data.type) { case http.HttpEventType.UploadProgress: /** @type {?} */ var percentage = Math.round((data.loaded * 100) / data.total); /** @type {?} */ var diff = new Date().getTime() - time; speed = Math.round(data.loaded / diff * 1000); eta = Math.ceil((data.total - data.loaded) / speed); // console.log('Progress: ' + this.fileUploadProgress); /** @type {?} */ var fileProgress_1 = { status: 'Uploading', data: { percentage: percentage, speed: speed, speedHuman: _this.humanizeBytes(speed) + "/s", startTime: null, endTime: null, eta: eta, etaHuman: _this.secondsToHuman(eta) } }; files.forEach(( /** * @param {?} file * @param {?} index * @param {?} filesArray * @return {?} */function (file, index, filesArray) { filesArray[index].progress = fileProgress_1; })); observer.next({ type: 'uploading', requestId: files[0].requestId, files: files, progress: fileProgress_1, fileSelectedEventType: files[0].selectedEventType }); break; case http.HttpEventType.Response: files[0].response = data.body; /** @type {?} */ var progress = { status: 'Done', data: { percentage: 100, speed: speed, speedHuman: _this.humanizeBytes(speed) + "/s", startTime: null, endTime: new Date().getTime(), eta: eta, etaHuman: _this.secondsToHuman(eta || 0) } }; files.forEach(( /** * @param {?} file * @param {?} index * @param {?} filesArray * @return {?} */function (file, index, filesArray) { filesArray[index].response = data.body; })); observer.next({ type: 'done', requestId: files[0].requestId, response: data.body, progress: progress, fileSelectedEventType: files[0].selectedEventType, files: files }); observer.complete(); break; } }), ( /** * @param {?} error * @return {?} */function (error) { // console.log(error); observer.next({ type: 'error', requestId: files[0].requestId, response: error, fileSelectedEventType: files[0].selectedEventType }); observer.complete(); })); _this.subscriptions.push({ id: files[0].requestId, sub: httpRequestSubscription }); } else { _this.httpErrorResponse = new http.HttpErrorResponse({ status: 0, error: 'Files not available for upload', statusText: 'Invalid Input' }); observer.next({ type: 'error', requestId: files[0].requestId, response: _this.httpErrorResponse }); observer.complete(); } })); }; /** * Http Request to upload file(s). * @param {?} requestMethod Request method POST | GET * @param {?} apiUrl Url to send request * @param {?} body FormData to passwith * @param {?=} headers * @return {?} */ NgxUploaderDirectiveService.prototype.httpRequest = function (requestMethod, apiUrl, body, headers) { /** @type {?} */ var req = new http.HttpRequest(requestMethod, apiUrl, body, { headers: headers, reportProgress: true }); return this.httpClient.request(req); }; /** * Converting seconds to human readable * @param {?} sec Seconds * @return {?} */ NgxUploaderDirectiveService.prototype.secondsToHuman = function (sec) { return new Date(sec * 1000).toISOString().substr(11, 8); }; /** * Check for max file size is allowed or not * @param {?} fileSize file size * @return {?} */ NgxUploaderDirectiveService.prototype.isFileSizeAllowed = function (fileSize) { if (!this.maxFileSize) { return true; } return fileSize <= this.maxFileSize; }; /** * Generate Randome file id * @return {?} */ NgxUploaderDirectiveService.prototype.generateRandomeId = function () { return '_' + Math.random().toString(36).substr(2, 9); }; /** * Humanize file Bytes * @param {?} bytes file bytes * @return {?} */ NgxUploaderDirectiveService.prototype.humanizeBytes = function (bytes) { if (bytes === 0) { return '0 Byte'; } /** @type {?} */ var k = 1024; /** @type {?} */ var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB']; /** @type {?} */ var i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; }; /** * Convert selected file to Selected file Interface * @param {?} file Selected File * @param {?} fileIndex File index in array * @param {?} id * @param {?} selectedEventType * @return {?} */ NgxUploaderDirectiveService.prototype.convertToSelectedFile = function (file, fileIndex, id, selectedEventType) { // if (this.logs && this.devEnv) { // console.info('Converting file to Input Selected File index: ' + fileIndex, file); // } return { fileIndex: fileIndex, requestId: id, name: file.name, nativeFile: file, type: file.type, selectedEventType: selectedEventType, progress: { status: 'Queue', data: { percentage: 0, eta: 0, speed: 0, speedHuman: this.humanizeBytes(0), startTime: null, endTime: null, etaHuman: null, } } }; }; /** * Make chunks of array. * @param {?} array Array to make chunks. * @param {?} chunkSize Chunk size. * @return {?} */ NgxUploaderDirectiveService.prototype.chunkArray = function (array, chunkSize) { /** @type {?} */ var chunkedArray = new Array(); /** @type {?} */ var index = 0; /** @type {?} */ var arrayLength = array.length; for (index = 0; index < arrayLength; index += chunkSize) { /** @type {?} */ var myChunk = array.slice(index, index + chunkSize); // Do something if you want with the group chunkedArray.push(myChunk); } return chunkedArray; }; /** * Group by an Array. * @param {?} array Array of objects * @param {?} key key * @return {?} */ NgxUploaderDirectiveService.prototype.groupByArray = function (array, key) { return array.reduce(( /** * @param {?} previousValue * @param {?} currentValue * @return {?} */function (previousValue, currentValue) { (previousValue[currentValue[key]] = previousValue[currentValue[key]] || []).push(currentValue); return previousValue; }), {}); }; return NgxUploaderDirectiveService; }()); NgxUploaderDirectiveService.inputEventReferenceNumber = 0; if (false) { /** @type {?} */ NgxUploaderDirectiveService.inputEventReferenceNumber; /** * @type {?} * @private */ NgxUploaderDirectiveService.prototype.devEnv; /** @type {?} */ NgxUploaderDirectiveService.prototype.queue; /** @type {?} */ NgxUploaderDirectiveService.prototype.MaxNumberOfRequest; /** @type {?} */ NgxUploaderDirectiveService.prototype.subscriptions; /** @type {?} */ NgxUploaderDirectiveService.prototype.fileServiceEvents; /** @type {?} */ NgxUploaderDirectiveService.prototype.uploadScheduler; /** @type {?} */ NgxUploaderDirectiveService.prototype.fileTypes; /** @type {?} */ NgxUploaderDirectiveService.prototype.maxFileUploads; /** @type {?} */ NgxUploaderDirectiveService.prototype.maxFileSize; /** @type {?} */ NgxUploaderDirectiveService.prototype.requestConcurrency; /** @type {?} */ NgxUploaderDirectiveService.prototype.maxFilesToAddInSingleRequest; /** @type {?} */ NgxUploaderDirectiveService.prototype.httpErrorResponse; /** * @type {?} * @private */ NgxUploaderDirectiveService.prototype.httpClient; /** * @type {?} * @private */ NgxUploaderDirectiveService.prototype.logs; } /** * @fileoverview added by tsickle * Generated from: lib/directives/ngx-uploader-drop.directive.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var NgxUploaderDropDirective = /** @class */ (function () { /** * @param {?} elementRef * @param {?} httpClient */ function NgxUploaderDropDirective(elementRef, httpClient) { this.elementRef = elementRef; this.httpClient = httpClient; this.devEnv = !environment.production; this.stopEvent = ( /** * @param {?} event * @return {?} */function (event) { event.stopPropagation(); event.preventDefault(); }); this.uploadOutput = new core.EventEmitter(); } // tslint:disable-next-line: use-life-cycle-interface /** * @return {?} */ NgxUploaderDropDirective.prototype.ngOnInit = function () { var _this = this; this.subscriptions = new Array(); /** @type {?} */ var concurrency = this.options.requestConcurrency; /** @type {?} */ var allowedFileTypes = this.options.allowedFileTypes; /** @type {?} */ var maxFileUploads = this.options.maxFileUploads; /** @type {?} */ var maxFileSize = this.options.maxFileSize; this.uploadService = new NgxUploaderDirectiveService(concurrency, this.options.maxFilesToAddInSingleRequest, allowedFileTypes, maxFileUploads, maxFileSize, this.httpClient, this.options.logs); // file upload element this.element = this.elementRef.nativeElement; this.element.addEventListener('drop', this.stopEvent, false); this.element.addEventListener('dragenter', this.stopEvent, false); this.element.addEventListener('dragover', this.stopEvent, false); // Adding events to subscriptions this.subscriptions.push(this.uploadService.fileServiceEvents.subscribe(( /** * @param {?} event * @return {?} */function (event) { if (event.fileSelectedEventType === 'DROP' || event.fileSelectedEventType === 'ALL') { if (_this.options.logs && _this.devEnv) { console.info('Output drop event', event); } if (event.type === 'error' || event.type === 'removedAll') { _this.element.files = null; _this.element.value = ''; } else if (event.type === 'removed' || event.type === 'rejected') { if (_this.uploadService.queue.length === 0) { _this.element.files = null; _this.element.value = ''; } } _this.uploadOutput.emit(event); } }))); if (this.uploadInput instanceof core.EventEmitter) { if (this.options.logs && this.devEnv) { console.info('Input drop Init'); } this.subscriptions.push(this.uploadService.handleInputEvents(this.uploadInput)); } }; // tslint:disable-next-line: use-life-cycle-interface /** * @return {?} */ NgxUploaderDropDirective.prototype.ngOnDestroy = function () { this.subscriptions.forEach(( /** * @param {?} sub * @return {?} */function (/** * @param {?} sub * @return {?} */ sub) { return sub.unsubscribe(); })); }; /** * @param {?} event * @return {?} */ NgxUploaderDropDirective.prototype.onDrop = function (event) { event.stopPropagation(); event.preventDefault(); /** @type {?} */ var outputEvent = { type: 'drop', fileSelectedEventType: 'DROP' }; this.uploadOutput.emit(outputEvent); this.uploadService.handleSelectedFiles(event.dataTransfer.files, 'DROP'); }; /** * @param {?} event * @return {?} */ NgxUploaderDropDirective.prototype.onDragOver = function (event) { if (!event) { return; } /** @type {?} */ var outputEvent = { type: 'dragOver', fileSelectedEventType: 'DROP' }; this.uploadOutput.emit(outputEvent); }; /** * @param {?} event * @return {?} */ NgxUploaderDropDirective.prototype.onDragLeave = function (event) { if (!event) { return; } /** @type {?} */ var outputEvent = { type: 'dragOut', fileSelectedEventType: 'DROP' }; this.uploadOutput.emit(outputEvent); }; return NgxUploaderDropDirective; }()); NgxUploaderDropDirective.decorators = [ { type: core.Directive, args: [{ // tslint:disable-next-line: directive-selector selector: '[ngxFileDrop]' },] } ]; /** @nocollapse */ NgxUploaderDropDirective.ctorParameters = function () { return [ { type: core.ElementRef }, { type: http.HttpClient } ]; }; NgxUploaderDropDirective.propDecorators = { options: [{ type: core.Input }], uploadInput: [{ type: core.Input }], uploadOutput: [{ type: core.Output }], onDrop: [{ type: core.HostListener, args: ['drop', ['$event'],] }], onDragOver: [{ type: core.HostListener, args: ['dragover', ['$event'],] }], onDragLeave: [{ type: core.HostListener, args: ['dragleave', ['$event'],] }] }; if (false) { /** * @type {?} * @private */ NgxUploaderDropDirective.prototype.devEnv; /** @type {?} */ NgxUploaderDropDirective.prototype.options; /** @type {?} */ NgxUploaderDropDirective.prototype.uploadInput; /** @type {?} */ NgxUploaderDropDirective.prototype.uploadOutput; /** @type {?} */ NgxUploaderDropDirective.prototype.uploadService; /** @type {?} */ NgxUploaderDropDirective.prototype.element; /** @type {?} */ NgxUploaderDropDirective.prototype.subscriptions; /** @type {?} */ NgxUploaderDropDirective.prototype.stopEvent; /** @type {?} */ NgxUploaderDropDirective.prototype.elementRef; /** * @type {?} * @private */ NgxUploaderDropDirective.prototype.httpClient; } /** * @fileoverview added by tsickle * Generated from: lib/directives/ngx-uploader-select.directive.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var NgxUploaderSelectDirective = /** @class */ (function () { /** * @param {?} elementRef * @param {?} httpClient */ function NgxUploaderSelectDirective(elementRef, httpClient) { var _this = this; this.elementRef = elementRef; this.httpClient = httpClient; this.devEnv = !environment.production; this.fileListener = ( /** * @return {?} */function () { // tslint:disable-next-line: no-console if (_this.element.files) { // call service method to handle selected files _this.uploadService.handleSelectedFiles(_this.element.files, 'SELECT'); } }); this.uploadOutput = new core.EventEmitter(); } // tslint:disable-next-line: use-life-cycle-interface /** * @return {?} */ NgxUploaderSelectDirective.prototype.ngOnInit = function () { var _this = this; this.subscriptions = new Array(); /** @type {?} */ var concurrency = this.options.requestConcurrency; /** @type {?} */ var allowedFileTypes = this.options.allowedFileTypes; /** @type {?} */ var maxFileUploads = this.options.maxFileUploads; /** @type {?} */ var maxFileSize = this.options.maxFileSize; // tslint:disable-next-line: max-line-length this.uploadService = new NgxUploaderDirectiveService(concurrency, this.options.maxFilesToAddInSingleRequest, allowedFileTypes, maxFileUploads, maxFileSize, this.httpClient, this.options.logs); // file upload element this.element = this.elementRef.nativeElement; // Adding on change event listener this.element.addEventListener('change', this.fileListener, false); this.subscriptions.push(this.uploadService.fileServiceEvents.subscribe(( /** * @param {?} event * @return {?} */function (event) { if (event.fileSelectedEventType === 'SELECT' || event.fileSelectedEventType === 'ALL') { if (event.type === 'error' || event.type === 'removedAll') { _this.element.files = null; _this.element.value = ''; } else if (event.type === 'removed' || event.type === 'rejected') { if (_this.uploadService.queue.length === 0) { _this.element.files = null; _this.element.value = ''; } } _this.uploadOutput.emit(event); } }))); if (this.uploadInput instanceof core.EventEmitter) { if (this.options.logs && this.devEnv) { console.info('Input select Init'); } this.subscriptions.push(this.uploadService.handleInputEvents(this.uploadInput)); } }; // tslint:disable-next-line: use-life-cycle-interface /** * @return {?} */ NgxUploaderSelectDirective.prototype.ngOnDestroy = function () { if (this.element) { this.element.removeEventListener('change', this.fileListener, false); this.subscriptions.forEach(( /** * @param {?} sub * @return {?} */function (/** * @param {?} sub * @return {?} */ sub) { return sub.unsubscribe(); })); } }; return NgxUploaderSelectDirective; }()); NgxUploaderSelectDirective.decorators = [ { type: core.Directive, args: [{ // tslint:disable-next-line: directive-selector selector: '[ngxFileSelect]' },] } ]; /** @nocollapse */ NgxUploaderSelectDirective.ctorParameters = function () { return [ { type: core.ElementRef }, { type: http.HttpClient } ]; }; NgxUploaderSelectDirective.propDecorators = { options: [{ type: core.Input }], uploadInput: [{ type: core.Input }], uploadOutput: [{ type: core.Output }] }; if (false) { /** * @type {?} * @private */ NgxUploaderSelectDirective.prototype.devEnv; /** @type {?} */ Ngx