ng2-uploader/src/directives/ng-file-drop.js

Angular2 File Uploader

"use strict";
var core_1 = require('@angular/core');
var ng2_uploader_1 = require('../services/ng2-uploader');
var classes_1 = require('../classes');
var NgFileDropDirective = (function () {
    function NgFileDropDirective(el, uploader) {
        this.el = el;
        this.uploader = uploader;
        this.onUpload = new core_1.EventEmitter();
        this.onPreviewData = new core_1.EventEmitter();
        this.onFileOver = new core_1.EventEmitter();
        this.onUploadRejected = new core_1.EventEmitter();
        this.beforeUpload = new core_1.EventEmitter();
        this.files = [];
    }
    NgFileDropDirective.prototype.ngOnInit = function () {
        var _this = this;
        this.uploader._emitter.subscribe(function (data) {
            _this.onUpload.emit(data);
            if (data.done) {
                _this.files = _this.files.filter(function (f) { return f.name !== data.originalName; });
            }
        });
        this.uploader._previewEmitter.subscribe(function (data) {
            _this.onPreviewData.emit(data);
        });
        this.uploader._beforeEmitter.subscribe(function (uploadingFile) {
            _this.beforeUpload.emit(uploadingFile);
        });
        setTimeout(function () {
            if (_this.events instanceof core_1.EventEmitter) {
                _this.events.subscribe(function (data) {
                    if (data === 'startUpload') {
                        _this.uploader.uploadFilesInQueue();
                    }
                });
            }
        });
        this.initEvents();
    };
    NgFileDropDirective.prototype.ngOnChanges = function () {
        if (!this.options) {
            return;
        }
        this.options = new classes_1.Ng2UploaderOptions(this.options);
        this.uploader.setOptions(this.options);
    };
    NgFileDropDirective.prototype.initEvents = function () {
        var _this = this;
        if (typeof this.el.nativeElement.addEventListener === 'undefined') {
            return;
        }
        this.el.nativeElement.addEventListener('drop', function (e) {
            e.stopPropagation();
            e.preventDefault();
            _this.files = Array.from(e.dataTransfer.files);
            if (_this.files.length) {
                _this.uploader.addFilesToQueue(_this.files);
            }
        }, false);
        this.el.nativeElement.addEventListener('dragenter', function (e) {
            e.stopPropagation();
            e.preventDefault();
        }, false);
        this.el.nativeElement.addEventListener('dragover', function (e) {
            e.stopPropagation();
            e.preventDefault();
        }, false);
    };
    NgFileDropDirective.prototype.onChange = function () {
        var _this = this;
        this.files = this.el.nativeElement.files;
        if (!this.files) {
            console.log('return');
            return;
        }
        if (this.options.filterExtensions && this.options.allowedExtensions) {
            this.files = this.files.filter(function (f) {
                if (_this.options.allowedExtensions.indexOf(f.type) !== -1) {
                    return true;
                }
                var ext = f.name.split('.').pop();
                if (_this.options.allowedExtensions.indexOf(ext) !== -1) {
                    return true;
                }
                _this.onUploadRejected.emit({ file: f, reason: classes_1.UploadRejected.EXTENSION_NOT_ALLOWED });
                return false;
            });
        }
        if (this.files.length) {
            this.uploader.addFilesToQueue(this.files);
        }
    };
    NgFileDropDirective.prototype.onDragOver = function (event) {
        this.onFileOver.emit(true);
    };
    NgFileDropDirective.prototype.onDragLeave = function (event) {
        this.onFileOver.emit(false);
    };
    NgFileDropDirective.decorators = [
        { type: core_1.Directive, args: [{
                    selector: '[ngFileDrop]'
                },] },
    ];
    /** @nocollapse */
    NgFileDropDirective.ctorParameters = function () { return [
        { type: core_1.ElementRef, decorators: [{ type: core_1.Inject, args: [core_1.ElementRef,] },] },
        { type: ng2_uploader_1.Ng2UploaderService, decorators: [{ type: core_1.Inject, args: [ng2_uploader_1.Ng2UploaderService,] },] },
    ]; };
    NgFileDropDirective.propDecorators = {
        'options': [{ type: core_1.Input },],
        'events': [{ type: core_1.Input },],
        'onUpload': [{ type: core_1.Output },],
        'onPreviewData': [{ type: core_1.Output },],
        'onFileOver': [{ type: core_1.Output },],
        'onUploadRejected': [{ type: core_1.Output },],
        'beforeUpload': [{ type: core_1.Output },],
        'onChange': [{ type: core_1.HostListener, args: ['change',] },],
        'onDragOver': [{ type: core_1.HostListener, args: ['dragover', ['$event'],] },],
        'onDragLeave': [{ type: core_1.HostListener, args: ['dragleave', ['$event'],] },],
    };
    return NgFileDropDirective;
}());
exports.NgFileDropDirective = NgFileDropDirective;