dbm 1.0.6 → 1.1.0

package/flow/updatefunctions/dom/ElementPosition.js

@@ -49,7 +49,7 @@ export default class ElementPosition extends Dbm.flow.FlowUpdateFunction {
     }
 
     _callback_scroll(aEvent) {
-        console.log("_callback_scroll");
+        //console.log("_callback_scroll");
 
         let element = this.input.element;
 

package/flow/updatefunctions/dom/HorizontalFlip.js

@@ -6,11 +6,10 @@ export default class HorizontalFlip extends Dbm.flow.FlowUpdateFunction {
         super._construct();
         
         this.input.register("envelope", 0);
-        console.log(this.input.properties.envelope);
         this.input.register("perspective", "3000px");
 
         this.output.register("style1", {});
-        this.output.register("style2", {"opacity": 0, "position": "absolute", "top": 0, "left": 0, "width": "100%", "dispaly": "none"});
+        this.output.register("style2", {"opacity": 0, "position": "absolute", "top": 0, "left": 0, "width": "100%", "display": "none"});
         this.output.register("inDom1", true);
         this.output.register("inDom2", false);
     }
@@ -28,12 +27,12 @@ export default class HorizontalFlip extends Dbm.flow.FlowUpdateFunction {
         this.output.inDom2 = inDom2;
 
         if(!inDom1) {
-            this.output.style1 = {"opacity": 0, "position": "absolute", "top": 0, "left": 0, "width": "100%", "dispaly": "none"};
+            this.output.style1 = {"opacity": 0, "position": "absolute", "top": 0, "left": 0, "width": "100%", "display": "none"};
             this.output.style2 = {};
         }
         else if(!inDom2) {
             this.output.style1 = {};
-            this.output.style2 = {"opacity": 0, "position": "absolute", "top": 0, "left": 0, "width": "100%", "dispaly": "none"};
+            this.output.style2 = {"opacity": 0, "position": "absolute", "top": 0, "left": 0, "width": "100%", "display": "none"};
         }
         else {
             let angle1 = 180*envelope;
@@ -49,7 +48,7 @@ export default class HorizontalFlip extends Dbm.flow.FlowUpdateFunction {
                 styleObject2["position"] = "absolute";
                 styleObject2["top"] = 0;
                 styleObject2["left"] = 0;
-                styleObject2["width"] = 0;
+                styleObject2["width"] = "100%";
             }
             else {
                 styleObject1["opacity"] = 0;
@@ -57,7 +56,7 @@ export default class HorizontalFlip extends Dbm.flow.FlowUpdateFunction {
                 styleObject1["position"] = "absolute";
                 styleObject1["top"] = 0;
                 styleObject1["left"] = 0;
-                styleObject1["width"] = 0;
+                styleObject1["width"] = "100%";
             }
 
             this.output.style1 = styleObject1;

package/flow/updatefunctions/dom/StyleObject.js

@@ -33,7 +33,7 @@ export default class StyleObject extends Dbm.flow.FlowUpdateFunction {
             let unit = this.input.units[objectName].value;
 
             if(unit) {
-                value += " " + unit;
+                value += "" + unit;
             }
             styleObject[objectName] = value;
         }

package/flow/updatefunctions/logic/Switch.js

@@ -12,6 +12,12 @@ export default class Switch extends Dbm.flow.FlowUpdateFunction {
         this.output.register("value", null);
     }
 
+    setDefaultValue(aValue) {
+        this.input.properties.defaultValue.setOrConnect(aValue);
+
+        return this;
+    }
+
     addCase(aKey, aOutputValue) {
 
         let newCase = {key: aKey, value: aOutputValue};

package/graphapi/webclient/WebSocketConnection.js

@@ -50,14 +50,16 @@ export default class WebSocketConnection extends Dbm.core.BaseObject {
     }
 
     _runRequest(aRequestItem) {
-        let newRequests = [].concat(this.item.requests);
-        newRequests.push(aRequestItem);
-        this.item.setValue("requests", newRequests);
-
+        
         if(this.item.status === 1) {
             aRequestItem.setValue("status", Dbm.loading.LoadingStatus.LOADING);
             this._webSocket.send(JSON.stringify(aRequestItem.requestData));
         }
+        else {
+            let newRequests = [].concat(this.item.requests);
+            newRequests.push(aRequestItem);
+            this.item.setValue("requests", newRequests);
+        }
     }
 
     requestRange(aSelect, aEncode) {
@@ -111,7 +113,7 @@ export default class WebSocketConnection extends Dbm.core.BaseObject {
     }
 
     _callback_onOpen(aEvent) {
-        console.log("_callback_onOpen");
+        //console.log("_callback_onOpen");
 
 		if(this._intervalId === -1) {
 			this._intervalId = setInterval(this._callback_sendHeartbeatBound, 20*1000);
@@ -119,8 +121,8 @@ export default class WebSocketConnection extends Dbm.core.BaseObject {
     }
 	
     _callback_onClose(aEvent) {
-        console.log("_callback_onClose");
-		console.log(aEvent);
+        //console.log("_callback_onClose");
+		//console.log(aEvent);
 		
 		if(this._intervalId !== -1) {
 			clearInterval(this._intervalId);
@@ -148,13 +150,14 @@ export default class WebSocketConnection extends Dbm.core.BaseObject {
     }
 	
 	_callback_sendHeartbeat() {
-		console.log("_callback_sendHeartbeat");
+		//console.log("_callback_sendHeartbeat");
 		
 		this._webSocket.send(JSON.stringify({"type": "heartbeat"}));
 	}
 
     _connectionReady() {
         this.item.setValue("status", 1);
+
         let currentArray = this.item.requests;
         let currentArrayLength = currentArray.length;
         for(let i = 0; i < currentArrayLength; i++) {
@@ -162,6 +165,8 @@ export default class WebSocketConnection extends Dbm.core.BaseObject {
             currentItem.setValue("status", Dbm.loading.LoadingStatus.LOADING);
             this._webSocket.send(JSON.stringify(currentItem.requestData));
         }
+
+        this.item.requests = [];
     }
 
     _callback_onMessage(aEvent) {

package/graphapi/webclient/decode/index.js

@@ -62,6 +62,22 @@ let fullSetup = function() {
         currentDecoder.item.setValue("encodingType", name);
         currentDecoder.item.register(decodePrefix + name);
     }
+
+    {
+        let name = "navigationName";
+        let currentDecoder = new Dbm.graphapi.webclient.decode.DecodeBaseObject();
+        currentDecoder.item.setValue("copyFields", ["navigationName"]);
+        currentDecoder.item.setValue("encodingType", name);
+        currentDecoder.item.register(decodePrefix + name);
+    }
+
+    {
+        let name = "breadcrumb";
+        let currentDecoder = new Dbm.graphapi.webclient.decode.DecodeBaseObject();
+        currentDecoder.item.setValue("copyLinks", ["breadcrumbs"]);
+        currentDecoder.item.setValue("encodingType", name);
+        currentDecoder.item.register(decodePrefix + name);
+    }
 }
 
 export {fullSetup};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dbm",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "main": "index.js",
   "type": "module",
   "scripts": {},

package/react/BaseObject.js

@@ -25,7 +25,7 @@ export default class BaseObject extends Component {
             if(currentProp && currentProp.isSource) {
                 currentProp = currentProp.getSource(this);
                 let currentDynamicProperty = this.getDynamicProp(objectName);
-                currentDynamicProperty.setValue(currentProp);
+                currentDynamicProperty.setOrConnect(currentProp);
             }
             else if(currentProp && currentProp.isFlowProperty) {
                 let currentDynamicProperty = this.getDynamicProp(objectName);
@@ -129,15 +129,13 @@ export default class BaseObject extends Component {
         return this._performCreateMainElement(aType, aProps, children);
     }
 
-    _performCreateMainElement(aType, aProps, children) {
+    _removedUsedProps(aProps) {
+        
+    }
 
+    _copyProps(aProps) {
         let newProps = {...aProps};
 
-        let elementType = this.getProp("elementType");
-        if(elementType) {
-            aType = elementType;
-        }
-
         for(let objectName in this.props) {
             let currentValue = this.getPropValue(objectName);
             switch(objectName) {
@@ -178,6 +176,19 @@ export default class BaseObject extends Component {
             }
         }
 
+        this._removedUsedProps(newProps);
+        return newProps;
+    }
+
+    _performCreateMainElement(aType, aProps, children) {
+
+        let newProps = this._copyProps(aProps);
+
+        let elementType = this.getProp("elementType");
+        if(elementType) {
+            aType = elementType;
+        }
+
         if(!children || !children.length) {
             return createElement(aType, newProps);
         }

package/react/ChildFunctions.js

@@ -0,0 +1,27 @@
+import Dbm from "../index.js";
+
+export const splitIntoSlots = function(aChildren) {
+    let returnObject = {};
+
+    aChildren = Dbm.utils.ArrayFunctions.singleOrArray(aChildren);
+
+    if(aChildren) {
+        let currentArray = aChildren;
+        let currentArrayLength = currentArray.length;
+        for(let i = 0; i < currentArrayLength; i++) {
+            let currentElement = currentArray[i];
+            let currentSlot = Dbm.objectPath(currentElement, "props.data-slot");
+            if(!currentSlot) {
+                currentSlot = "main";
+            }
+            let currentArea = returnObject[currentSlot];
+            if(!currentArea) {
+                returnObject[currentSlot] = currentArea = [];
+            }
+            currentArea.push(currentElement);
+        }
+    }
+    
+
+    return returnObject;
+}

package/react/admin/EditPage.js

@@ -8,6 +8,7 @@ export default class EditPage extends Dbm.react.BaseObject {
         let page = this.context.page;
 
         this.item.setValue("title", page.title);
+        this.item.setValue("navigationName", page.navigationName);
         this.item.setValue("content", page.content);
         this.item.setValue("description", page["meta/description"]);
         this.item.setValue("url", page.url);
@@ -21,10 +22,13 @@ export default class EditPage extends Dbm.react.BaseObject {
         let page = this.context.page;
         let id = page.id;
         let graphApi = Dbm.getInstance().repository.getItem("graphApi").controller;
+        console.log(this.item.content);
+        console.log(this.item.content.blocks[1].data.text);
 
         graphApi.editItem(id, [
             {"type": "setField", "data": {"value": this.item.content, "field": "content"}},
             {"type": "setField", "data": {"value": this.item.title, "field": "title"}},
+            {"type": "setField", "data": {"value": this.item.navigationName, "field": "navigationName"}},
             {"type": "setField", "data": {"value": this.item.description, "field": "meta/description"}},
 			{"type": "setField", "data": {"value": (new Date()).toISOString(), "field": "lastModified"}},
             {"type": "setUrl", "data": {"value": this.item.url}}
@@ -42,6 +46,13 @@ export default class EditPage extends Dbm.react.BaseObject {
                     React.createElement(Dbm.react.form.FormField, {"value": this.item.properties.title, className: "standard-field standard-field-padding full-width page-title-form-field", placeholder: "Title"}),
                 ),
                 React.createElement("div", {className: "spacing standard"}),
+                React.createElement("div", {},
+                    React.createElement("label", {className: "standard-field-label"},
+                        "Navigation name"
+                    ),
+                    React.createElement(Dbm.react.form.FormField, {"value": this.item.properties.navigationName, className: "standard-field standard-field-padding full-width", placeholder: "Name showed in menues and breadcrumbs"}),
+                ),
+                React.createElement("div", {className: "spacing standard"}),
                 React.createElement("div", {},
                     React.createElement("label", {className: "standard-field-label"},
                         "Url"
@@ -62,7 +73,7 @@ export default class EditPage extends Dbm.react.BaseObject {
                     "Content"
                 ),
                 React.createElement("div", {},
-                    React.createElement(Dbm.react.admin.Editor, {"value": this.item.properties.content}),
+                    React.createElement(Dbm.react.admin.editor.Editor, {"value": this.item.properties.content}),
                 )
             ),
             React.createElement("div", {className: "spacing standard"}),

package/react/admin/{Editor.js → editor/Editor.js}

@@ -1,5 +1,5 @@
 import React from "react";
-import Dbm from "../../index.js";
+import Dbm from "../../../index.js";
 
 import EditorBlock from "./EditorBlock.js";
 
@@ -7,6 +7,9 @@ export default class Editor extends Dbm.react.BaseObject {
     _construct() {
         super._construct();
 
+        let editorId = "editor/instance" + Dbm.getInstance().getNextId();
+        this.item.register(editorId);
+
         let all = Dbm.flow.updatefunctions.logic.allAtValue(1);
 
         all.addCheck(Dbm.loading.loadScript("https://cdn.jsdelivr.net/npm/@editorjs/image@latest").item.properties.status);
@@ -51,32 +54,38 @@ export default class Editor extends Dbm.react.BaseObject {
 
         if(aPreSign.status === 1) {
             let url = aPreSign.data.url;
-            console.log(url);
+            console.log(url, aPreSign.data);
 
-            const myHeaders = new Headers({
+            let headers = {
                 'Content-Type': aFile.type,
-                'x-amz-acl': 'public-read'
-            });
+                'Cache-Control': 'no-cache',
+            };
+
+            let additionalHeaders = aPreSign.data.additionalHeaders;
+            for(let objectName in additionalHeaders) {
+                headers[objectName] = additionalHeaders[objectName];
+            }
+
             fetch(url, {
                 method: 'PUT',
-                headers: myHeaders,
+                headers: new Headers(headers),
                 body: aFile
              }).then(() => {
-                resolve({success: true, file: {url: aPreSign.data.publicUrl}});
+                resolve({success: true, file: {url: aPreSign.data.publicUrl, resizeUrl: aPreSign.data.publicResizeUrl, identifier: aPreSign.data.identifier}});
              })
 
-            
         }
     }
 
     _callback_saveDataUpdated(aData) {
-        console.log("_callback_saveDataUpdated");
-        console.log(aData);
+        //console.log("_callback_saveDataUpdated");
+        //console.log(aData);
 
         this.getDynamicProp("value").getMostUpstreamProperty().setValue(aData);
     }
 
     _callback_editorChange(aApi, aEvent) {
+        console.log("_callback_editorChange");
         this.item.editor.save().then(this._callback_saveDataUpdatedBound);
     }
 
@@ -119,7 +128,14 @@ export default class Editor extends Dbm.react.BaseObject {
 
 
             let editorConfigItem = Dbm.getInstance().repository.getItem("editorjs");
-            let toolsFromConfig = editorConfigItem.tools;
+            let toolsFromConfig = {...editorConfigItem.tools};
+
+            let editorId = this.item.id;
+            for(let objectName in toolsFromConfig) {
+                let currentTool = {...toolsFromConfig[objectName]};
+                currentTool["config"] = {...currentTool["config"], "editorId": editorId};
+                toolsFromConfig[objectName] = currentTool;
+            }
 
             tools = {...tools, ...toolsFromConfig};
 		

package/react/admin/{EditorBlock.js → editor/EditorBlock.js}

@@ -1,4 +1,4 @@
-import Dbm from "../../index.js";
+import Dbm from "../../../index.js";
 
 export default class EditorBlock extends Dbm.core.BaseObject {
 
@@ -6,11 +6,18 @@ export default class EditorBlock extends Dbm.core.BaseObject {
         super();
 
         this._settings = aSettings;
-
+        
         this.item.setValue("data", aSettings.data ? aSettings.data : {});
         this.item.setValue("name", aSettings.config ? aSettings.config.name : "Unnamed block");
+        this.item.setValue("editor", aSettings.config ? Dbm.getInstance().repository.getItem(aSettings.config.editorId) : null);
         this.item.setValue("module", Dbm.getInstance().repository.getItem("moduleCreators/blocks/editor/" + aSettings.config.module));
+        this.item.setValue("editorBlock", this); 
+
+    }
 
+    dataUpdated() {
+        //console.log("dataUpdated")
+        this._settings.block.dispatchChange();
     }
 
     render(){
@@ -35,12 +42,16 @@ export default class EditorBlock extends Dbm.core.BaseObject {
     }
   
     save(aHolderElement){
-        console.log("save");
-        console.log(aHolderElement);
+        //console.log("save");
+        //console.log(aHolderElement);
 
         return this.item.data;
     }
 
+    static get sanitize() {
+        return {};
+    }
+
     static get toolbox() {
 
         //'<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.5 -0.5 16 16" id="Module--Streamline-Streamline-3.0" height="16" width="16"><desc>Module Streamline Icon: https://streamlinehq.com</desc><g><path d="M14.21875 2.65625a0.625 0.625 0 0 1 0.46875 0.625v8.4375a0.625 0.625 0 0 1 -0.42500000000000004 0.59375l-6.55625 2.34375a0.625 0.625 0 0 1 -0.41250000000000003 0L0.725 12.318750000000001a0.625 0.625 0 0 1 -0.41250000000000003 -0.5874999999999999V3.2624999999999997a0.625 0.625 0 0 1 0.46875 -0.625L7.34375 0.33125000000000004a0.6625000000000001 0.6625000000000001 0 0 1 0.3125 0Z" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"></path><path d="m7.5 5.29375 0 9.393749999999999" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"></path><path d="M14.51875 2.8375 7.5 5.29375 0.48125 2.8375" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"></path></g></svg>'

package/react/admin/editor/EditorBlockFields.js

@@ -0,0 +1,23 @@
+import React from "react";
+import Dbm from "../../../index.js";
+
+export default class EditorBlockFields extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _renderMainElement() {
+
+        let textSource = new Dbm.react.source.ContextVariableSource();
+        textSource.item.path = "moduleData.editorData.name";
+
+        return React.createElement(Dbm.react.admin.editor.EditorBlockName, {},
+            React.createElement(Dbm.react.form.LabelledArea, {label: "fieldName", for: "test"},
+                React.createElement(Dbm.react.admin.editor.fields.TextField, {name: "fieldName", id: "test"})
+            ),
+                React.createElement(Dbm.react.admin.editor.fields.RichTextField, {name: "fieldName"}),
+                React.createElement(Dbm.react.admin.editor.fields.ImageField, {name: "image"})
+        );
+    }
+}
+

package/react/admin/editor/EditorBlockName.js

@@ -0,0 +1,28 @@
+import React from "react";
+import Dbm from "../../../index.js";
+
+export default class EditorBlockName extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _renderMainElement() {
+
+        let childrenAndSpacing = null;
+        let children = this.getPropValue("children");
+        if(children) {
+            childrenAndSpacing = React.createElement(React.Fragment, {},
+                React.createElement("div", {"className": "spacing standard"}),
+                children
+            )
+        }
+
+        return React.createElement("div", {"className": "editor-block-box editor-block-box-padding"},
+            React.createElement("div", {"className": "text-align-center"},
+                Dbm.react.text.text(Dbm.react.source.contextVariable("moduleData.editorData.name"))
+            ),
+            childrenAndSpacing
+        );
+    }
+}
+

package/react/admin/editor/fields/CheckboxField.js

@@ -0,0 +1,54 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class CheckboxField extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this._valueChangedBound = this._valueChanged.bind(this);
+        this._objectChangedBound = this._objectChanged.bind(this);
+
+        Dbm.flow.addUpdateCommand(this.item.requireProperty("value", this._getObjectData()), Dbm.commands.callFunction(this._valueChangedBound));
+
+        let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
+        Dbm.flow.addUpdateCommand(editorData.properties.data, Dbm.commands.callFunction(this._objectChangedBound));
+    }
+
+    _getObjectData() {
+        let fieldName = this.getPropValue("name");
+
+        let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
+
+        let returnData = editorData.data[fieldName];
+        if(!returnData) {
+            returnData = false;
+        }
+
+        return returnData;
+    }
+
+
+    _valueChanged() {
+        //console.log("_valueChanged");
+
+        let fieldName = this.getPropValue("name");
+        let newValue = this.item.value;
+        let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
+
+        let newData = {...editorData.data};
+        newData[fieldName] = newValue;
+
+        editorData.data = newData;
+        this.context.moduleData.editorData.editorBlock.dataUpdated();
+    }
+
+    _objectChanged() {
+        //console.log("_objectChanged");
+
+        this.item.value = this._getObjectData();
+    }
+
+    _renderMainElement() {
+        return this._createMainElement(Dbm.react.form.Checkbox, {checked: this.item.properties.value});
+    }
+}

package/react/admin/editor/fields/ImageField.js

@@ -0,0 +1,137 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class ImageField extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this._valueChangedBound = this._valueChanged.bind(this);
+        this._objectChangedBound = this._objectChanged.bind(this);
+        this._callback_fileChangedBound = this._callback_fileChanged.bind(this);
+
+        let fieldName = this.getPropValue("name");
+
+        let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
+
+        Dbm.flow.addUpdateCommand(this.item.requireProperty("value", this._getObjectData()), Dbm.commands.callFunction(this._valueChangedBound));
+
+        Dbm.flow.addUpdateCommand(editorData.properties.data, Dbm.commands.callFunction(this._objectChangedBound));
+
+        let imageElement = React.createElement("div", {className: "flex-row small-item-spacing"},
+            React.createElement("div", {className: "flex-row-item flex-no-resize"},
+                React.createElement(Dbm.react.image.Image, {"src": Dbm.react.source.contextVariable("moduleData.editorData.data." + fieldName + ".url"), className: "editor-preview background-contain"}),
+            ),
+            React.createElement("div", {className: "flex-row-item flex-resize"},
+                Dbm.react.text.text(Dbm.react.source.contextVariable("moduleData.editorData.data." + fieldName + ".url"))
+            ),
+            React.createElement("div", {className: "flex-row-item flex-no-resize"},
+                React.createElement("div", {onClick: () => {this.removeImage()}}, "Remove")
+            )
+        );
+
+        let uploadElement = React.createElement("input", {"type": "file", onChange: this._callback_fileChangedBound, className: "full-width"});
+
+        let elementSwitch =Dbm.flow.updatefunctions.logic.switchValue(this.item.properties.value).setDefaultValue(imageElement).addCase(null, uploadElement);
+
+        this.item.requireProperty("element", null).connectInput(elementSwitch.output.properties.value);
+    }
+
+    _getObjectData() {
+        let fieldName = this.getPropValue("name");
+
+        let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
+
+        let returnData = editorData.data[fieldName];
+        if(!returnData) {
+            returnData = null;
+        }
+
+        return returnData;
+    }
+
+    _valueChanged() {
+        //console.log("_valueChanged");
+
+        let fieldName = this.getPropValue("name");
+        let newValue = this.item.value;
+        let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
+
+        let newData = {...editorData.data};
+        newData[fieldName] = newValue;
+
+        editorData.data = newData;
+        this.context.moduleData.editorData.editorBlock.dataUpdated();
+    }
+
+    _objectChanged() {
+        //console.log("_objectChanged");
+
+        let fieldName = this.getPropValue("name");
+        let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
+
+        this.item.value = this._getObjectData();
+    }
+
+    _callback_fileChanged(aEvent) {
+        console.log("_callback_fileChanged");
+        console.log(aEvent, aEvent.target.files);
+
+        let files = aEvent.target.files;
+        if(files.length > 0) {
+            this.uploadImage(files[0]);
+        }
+    }
+
+    removeImage() {
+        this.item.value = null;
+
+        return this;
+    }
+
+    uploadImage(aFile) {
+            
+                let graphApi = Dbm.getInstance().repository.getItem("graphApi").controller;
+    
+                let preSign = graphApi.requestData("fileUpload", {"fileName": aFile.name, "mimeType": aFile.type});
+        
+                Dbm.flow.addDirectUpdateCommand(preSign.getProperty("status"), Dbm.commands.callFunction(this._statusChanged.bind(this), [preSign, aFile]));
+            
+        }
+    
+        _statusChanged(aPreSign, aFile) {
+            console.log("_statusChanged");
+            console.log(aPreSign, aFile);
+    
+            if(aPreSign.status === 1) {
+                let url = aPreSign.data.url;
+                console.log(url, aPreSign.data);
+    
+                let headers = {
+                    'Content-Type': aFile.type,
+                    'Cache-Control': 'no-cache',
+                };
+
+                let additionalHeaders = aPreSign.data.additionalHeaders;
+                for(let objectName in additionalHeaders) {
+                    headers[objectName] = additionalHeaders[objectName];
+                }
+
+                fetch(url, {
+                    method: 'PUT',
+                    headers: new Headers(headers),
+                    body: aFile
+                 }).then(() => {
+                    this.item.value = {url: aPreSign.data.publicUrl, resizeUrl: aPreSign.data.publicResizeUrl, identifier: aPreSign.data.identifier};
+                    console.log("Uploaded", this.item.value);
+                    //METODO: send update to editor
+                 })
+    
+            }
+        }
+
+    _renderMainElement() {
+        return this._createMainElement("div", {},
+            React.createElement(Dbm.react.area.InsertElement, {element: this.item.properties.element})
+        );
+    }
+}