aurelia-syncfusion-ej2-bridge 0.1.0-beta.25 → 0.1.0-beta.26

package/dist/native-modules/widgets/uploader/ej2-uploader.js

@@ -0,0 +1,343 @@
+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 { constants } from '../../common/constants';
+import { Uploader } from "@syncfusion/ej2-inputs";
+import { SyncfusionWrapper } from "../../common/syncfusionWrapper";
+import { generateBindables } from "../../utilities/decorator";
+import { bindable } from 'aurelia-framework';
+import { v4 as uuid } from "uuid";
+import { inlineView, customElement } from 'aurelia-framework';
+let Ej2Uploader = class Ej2Uploader extends SyncfusionWrapper {
+    constructor() {
+        super(...arguments);
+        this._filesProperty = `${constants.bindablePrefix}files`;
+        this.originalFiles = null;
+        this._filesCollectionSubscription = null;
+        this._privateIdProperty = "__id";
+        this.syncfusionWidgetType = Uploader;
+        this.mapAdditionalFilePropertiesToFiles = true;
+        this.sendAdditionalFilePropertiesAsFormData = true;
+        this.metadata = null;
+        this.formDataProperty = "metadata";
+        this.metadataGenerator = null;
+        this.uploadResultModel = null;
+        this.dataAdapter = null;
+        this.autoRemoveServerFiles = true;
+        this.context = null;
+        this.files = null;
+        this.firstBind = true;
+        this.serverDelete = true;
+    }
+    get _files() {
+        return this[this._filesProperty];
+    }
+    onWrapperCreated() {
+        this.widget.uploading = (args) => { this.onFileUpload(args); };
+        this.widget.success = (args) => { this.success(args); };
+        this.widget.failure = (args) => { this.failure(args); };
+        this.widget.removing = (args) => { this.removing(args); };
+        this.widget.change = (args) => { this.change(); };
+        if (this.dataAdapter) {
+            if (this.dataAdapter.remove) {
+                let _this = this;
+                this.widget.removeUploadedFile = function async(file, eventArgs, removeDirectly, custom) {
+                    let formData = new FormData();
+                    let selectedFiles = file;
+                    _this.widget.trigger("removing", eventArgs, function (eventArgs) {
+                        _this.widget.removingEventCallback(eventArgs, formData, selectedFiles, file);
+                    });
+                };
+                this.widget.asyncSettings.removeUrl = null;
+            }
+        }
+    }
+    onfilesChanged() {
+        if (!this.firstBind) {
+            this.widget.clearAll();
+            this.recreate();
+        }
+    }
+    recreating() {
+        this._filesCollectionSubscription.dispose();
+        this[this._filesProperty].splice(0, this[this._filesProperty].length, ...this.originalFiles);
+    }
+    recreated() {
+        this.initializeFileCollection();
+        this._filesCollectionSubscription = this.createFilesCollectionSubscription();
+    }
+    initializeFileCollection() {
+        if (this.files && Array.isArray(this.files)) {
+            this.widget.files.push(...JSON.parse(JSON.stringify(this.files)));
+        }
+        if (this.widget.files) {
+            let extraProperties = [];
+            let widgetFiles = this.widget.getFilesData();
+            if (this.mapAdditionalFilePropertiesToFiles) {
+                extraProperties = this.getAdditionalFileProperties();
+            }
+            for (let i = 0; i < widgetFiles.length; i++) {
+                const file = widgetFiles[i];
+                this.initializeFile(file, i, extraProperties);
+            }
+        }
+    }
+    initializeFile(widgetFile, i, extraProperties) {
+        let __id = uuid();
+        widgetFile[this._privateIdProperty] = __id;
+        this._files[i][this._privateIdProperty] = __id;
+        extraProperties.forEach((prop) => {
+            widgetFile[prop] = this._files[i][prop];
+        });
+    }
+    onWidgetCreated() {
+        this.initializeFileCollection();
+        this._filesCollectionSubscription = this.createFilesCollectionSubscription();
+        this.subscriptions.push(this._filesCollectionSubscription);
+    }
+    onBind() {
+        this.firstBind = false;
+        this.subscriptions.push(this.bindingEngine.propertyObserver(this, "files").subscribe(() => { this.onfilesChanged(); }));
+        if (this[this._filesProperty] && Array.isArray(this[this._filesProperty])) {
+            this.originalFiles = JSON.parse(JSON.stringify(this[this._filesProperty]));
+        }
+        else if (this.files && Array.isArray(this.files)) {
+            this.originalFiles = JSON.parse(JSON.stringify(this.files));
+        }
+        else {
+            this.originalFiles = [];
+        }
+    }
+    createFilesCollectionSubscription() {
+        if (!this._files) {
+            this[this._filesProperty] = [];
+        }
+        return this.bindingEngine.collectionObserver(this._files).subscribe((changed) => { });
+    }
+    change() {
+        if (this.autoRemoveServerFiles) {
+            this.getFilesThatWereRemoved().forEach((file) => {
+                this.removing({
+                    filesData: [file],
+                    customFormData: null,
+                    event: null,
+                    cancel: false
+                });
+            });
+        }
+    }
+    getFilesThatWereRemoved() {
+        let filesToRemove = [];
+        let widgetFiles = this.widget.getFilesData();
+        if (this[this._filesProperty].length !== widgetFiles.length) {
+            for (let i = 0; i < this[this._filesProperty].length; i++) {
+                const file = this[this._filesProperty][i];
+                if (!widgetFiles.find((x) => x[this._privateIdProperty] === file[this._privateIdProperty])) {
+                    filesToRemove.push(file);
+                }
+            }
+        }
+        return filesToRemove;
+    }
+    removeAll() {
+        this.widget.getFilesData().forEach((file) => {
+            this.removeFile(file);
+        });
+    }
+    removeFile(file) {
+        this.widget.remove(file);
+    }
+    async removing(args) {
+        let event = new CustomEvent("on-removing", {
+            bubbles: true,
+            detail: args
+        });
+        this.element.dispatchEvent(event);
+        if (args.cancel) {
+            return;
+        }
+        if (this.dataAdapter && this.dataAdapter.remove) {
+            try {
+                if (this.serverDelete) {
+                    await this.dataAdapter.remove.call(this.context || this.bindingContext, args.filesData[0]);
+                }
+                this.onRemoveSuccess(args);
+                this.onWidgetRemoveComplete(null, args);
+            }
+            catch (error) {
+                this.onWidgetRemoveFailed(error, args);
+            }
+        }
+    }
+    onWidgetRemoveComplete(response, args) {
+        this.widget.removeCompleted(response, args.filesData[0], false);
+    }
+    onWidgetRemoveFailed(e, args) {
+        this.widget.removeFailed(e, args.filesData[0], false);
+    }
+    onRemoveSuccess(args) {
+        let _file = args.filesData[0];
+        let index = this[this._filesProperty].findIndex((x) => x.__id === _file.__id);
+        if (index !== -1) {
+            const removedFile = this[this._filesProperty].splice(index, 1)[0];
+            let event = new CustomEvent("on-remove-success", {
+                bubbles: true,
+                detail: { args: args, removedFile: removedFile }
+            });
+            this.element.dispatchEvent(event);
+        }
+    }
+    success(args) {
+        if (args.operation === "upload") {
+            let response = JSON.parse(args.e.target.response);
+            let _uploadedFile = args.file;
+            let fileName = _uploadedFile.name.substr(0, _uploadedFile.name.length - (_uploadedFile.type.length + 1));
+            let additionalProperties = {};
+            additionalProperties[this._privateIdProperty] = uuid();
+            if (this.uploadResultModel) {
+                for (let prop in this.uploadResultModel) {
+                    additionalProperties[this.uploadResultModel[prop]] = response[prop];
+                }
+            }
+            let file = {
+                name: fileName,
+                size: _uploadedFile.size,
+                type: `.${_uploadedFile.type}`
+            };
+            Object.assign(_uploadedFile, additionalProperties);
+            Object.assign(file, additionalProperties);
+            if (this[this._filesProperty] === null) {
+                this[this._filesProperty] = [];
+            }
+            this[this._filesProperty].push(file);
+            let uploadedEvent = new CustomEvent("on-uploaded", {
+                bubbles: true,
+                detail: { args: args, uploadedFile: file }
+            });
+            this.element.dispatchEvent(uploadedEvent);
+        }
+        else if (args.operation === "remove") {
+        }
+        let successEvent = new CustomEvent("on-success", {
+            bubbles: true,
+            detail: args
+        });
+        this.element.dispatchEvent(successEvent);
+    }
+    failure(args) {
+        let event = new CustomEvent("on-failure", {
+            bubbles: true,
+            detail: args
+        });
+        this.element.dispatchEvent(event);
+    }
+    getAdditionalFileProperties() {
+        let extraProperties = [];
+        if (this[this._filesProperty] && this[this._filesProperty].length > 0) {
+            for (let prop in this[this._filesProperty][0]) {
+                if (prop !== "name" && prop !== "size" && prop !== "type") {
+                    extraProperties.push(prop);
+                }
+            }
+        }
+        return extraProperties;
+    }
+    onFileUpload(args) {
+        let _metadata = this.createMetadata(args.fileData);
+        if (_metadata) {
+            if (this.formDataProperty) {
+                let formData = {};
+                formData[this.formDataProperty] = JSON.stringify(_metadata);
+                args.customFormData = [formData];
+            }
+            else {
+                let formData = [];
+                for (let prop in _metadata) {
+                    let kvp = {};
+                    kvp[prop] = _metadata[prop];
+                    formData.push(kvp);
+                }
+                args.customFormData = formData;
+            }
+        }
+        let event = new CustomEvent("on-uploading", {
+            bubbles: true,
+            detail: args
+        });
+        this.element.dispatchEvent(event);
+    }
+    createMetadata(file) {
+        let _metadata = null;
+        if (this.sendAdditionalFilePropertiesAsFormData) {
+            if (_metadata === null) {
+                _metadata = {};
+            }
+            let props = this.getAdditionalFileProperties();
+            props.forEach((prop) => {
+                _metadata[prop] = file[prop];
+            });
+        }
+        if (this.metadata !== null) {
+            if (_metadata === null) {
+                _metadata = {};
+            }
+            Object.assign(_metadata, this.metadata);
+        }
+        if (this.metadataGenerator) {
+            if (_metadata === null) {
+                _metadata = {};
+            }
+            let _generatedMetadata = this.metadataGenerator.call(this.context || this.bindingContext, file);
+            Object.assign(_metadata, _generatedMetadata);
+        }
+        return _metadata;
+    }
+};
+__decorate([
+    bindable,
+    __metadata("design:type", Object)
+], Ej2Uploader.prototype, "metadata", void 0);
+__decorate([
+    bindable,
+    __metadata("design:type", Object)
+], Ej2Uploader.prototype, "formDataProperty", void 0);
+__decorate([
+    bindable,
+    __metadata("design:type", Function)
+], Ej2Uploader.prototype, "metadataGenerator", void 0);
+__decorate([
+    bindable,
+    __metadata("design:type", Object)
+], Ej2Uploader.prototype, "uploadResultModel", void 0);
+__decorate([
+    bindable,
+    __metadata("design:type", Object)
+], Ej2Uploader.prototype, "dataAdapter", void 0);
+__decorate([
+    bindable,
+    __metadata("design:type", Object)
+], Ej2Uploader.prototype, "autoRemoveServerFiles", void 0);
+__decorate([
+    bindable,
+    __metadata("design:type", Object)
+], Ej2Uploader.prototype, "context", void 0);
+__decorate([
+    bindable,
+    __metadata("design:type", Array)
+], Ej2Uploader.prototype, "files", void 0);
+__decorate([
+    bindable,
+    __metadata("design:type", Boolean)
+], Ej2Uploader.prototype, "serverDelete", void 0);
+Ej2Uploader = __decorate([
+    generateBindables("uploader"),
+    inlineView(`<template><input element.ref="widgetElement" type="file" name="UploadFiles" /></template>`),
+    customElement('ej2-uploader')
+], Ej2Uploader);
+export { Ej2Uploader };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "aurelia-syncfusion-ej2-bridge",
   "description": "An Aurelia plugin wrapper for syncfusion EJ2 controls",
-  "version": "0.1.0-beta.25",
+  "version": "0.1.0-beta.26",
   "keywords": [
     "aurelia",
     "syncfusion"