transport begin

codex-editor.js

@@ -12,7 +12,8 @@ var cEditor = (function (cEditor) {
         textareaId : 'codex-editor',
 
         // First-level tags viewing as separated blocks. Other'll be inserted as child
-        blockTags  : ['P','BLOCKQUOTE','UL','CODE','OL','H1','H2','H3','H4','H5','H6']
+        blockTags       : ['P','BLOCKQUOTE','UL','CODE','OL','H1','H2','H3','H4','H5','H6'],
+        uploadImagesUrl : '/upload/save.php',
     };
 
     // Static nodes
@@ -49,6 +50,7 @@ var cEditor = (function (cEditor) {
             .then(this.ui.make)
             .then(this.ui.addTools)
             .then(this.ui.bindEvents)
+            .then(this.transport.prepare)
             // .then(this.parser.parseTextareaContent)
             .then(this.renderer.makeBlocksFromData)
             .catch(function (error) {
@@ -1551,6 +1553,95 @@ cEditor.toolbar = {
 
 };
 
+/**
+* File transport module
+*/
+cEditor.transport = {
+
+    input : null,
+
+    prepare : function(){
+
+        var input = document.createElement('INPUT');
+
+        input.type = 'file';
+        input.addEventListener('change', cEditor.transport.fileSelected);
+
+        cEditor.transport.input = input;
+
+    },
+
+    /**
+    * Callback for file selection
+    */
+    fileSelected : function(event){
+
+        var input = this,
+            files = input.files,
+            filesLength = files.length,
+            formdData   = new FormData(),
+            file,
+            i;
+
+        for (i = 0; i < filesLength; i++) {
+
+            file = files[i];
+
+            /**
+            * Uncomment if need file type checking
+            * if (!file.type.match('image.*')) {
+            *     continue;
+            * }
+            */
+
+            formdData.append('files[]', file, file.name);
+        }
+
+        cEditor.transport.ajax({
+            data : formdData
+        });
+
+        console.log("files: %o", files);
+
+    },
+
+    /**
+    * @todo use callback for success and error
+    */
+    selectAndUpload : function (callback) {
+
+        this.input.click();
+
+    },
+
+    /**
+    * Ajax requests module
+    */
+    ajax : function(params){
+
+        var xhr = new XMLHttpRequest(),
+            success = typeof params.success == 'function' ? params.success : function(){},
+            error   = typeof params.error   == 'function' ? params.error   : function(){};
+
+        xhr.open('POST', cEditor.settings.uploadImagesUrl, true);
+
+        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
+
+        xhr.onload = function () {
+            if (xhr.status === 200) {
+                console.log("success request: %o", xhr);
+                success(xhr.responseText);
+            } else {
+                console.log("request error: %o", xhr);
+            }
+        };
+
+        xhr.send(params.data);
+
+    }
+
+};
+
 
 /**
 * Content parsing module

plugins/images/plugin.css

@@ -5,18 +5,43 @@
 * @version 0.0.1
 */
 .ce-plugin-image__holder{
+	position: relative;
 	background: #FEFEFE;
 	border: 2px dashed #E8EBF5;
 	border-radius: 55px;
 	margin: 30px 0;
-	padding: 30px 40px;
-	white-space: nowrap;
-	color: #A5ABBC;
-	font-size: 1.2em;
+	padding: 30px 110px 30px 40px;
 }
+	.ce-plugin-image__holder input{
+		border: 0;
+		background: transparent;
+		outline: none;
+		-webkit-appearance: none;
+		font-size: 1.2em;
+		color: #A5ABBC;
+	}
+	/* Placeholder color for Chrome */
+	.ce-plugin-image__holder input::-webkit-input-placeholder {
+	  color: #A5ABBC;
+	}
+	/* Placeholder color for IE 10+ */
+	.ce-plugin-image__holder input:-ms-input-placeholder {
+	  color: #A5ABBC;
+	}
+	/* Placeholder color for Firefox 19+ */
+	.ce-plugin-image__holder input::-moz-placeholder {
+	  color: #A5ABBC;
+	  opacity: 1;
+	}
 .ce-plugin-image__button{
-	float: right;
+	position: absolute;
+	z-index: 2;
+	right: 40px;
+	cursor: pointer;
 	font-family: "codex_editor";
 	font-size: 1.5em;
 	color: #8990AA;
-}
+}
+	.ce-plugin-image__button:hover{
+		color: #393F52;
+	}

plugins/images/plugin.js

@@ -9,12 +9,15 @@ var ceImage = {
 	make : function ( data ) {
 
 		var holder       = ceImage.ui.holder(),
-			uploadButton = ceImage.ui.uploadButton();
+			uploadButton = ceImage.ui.uploadButton(),
+			input        = ceImage.ui.input();
+
+		input.placeholder = 'Past image URL or file';
 
-		holder.textContent = 'Past image URL or file';
 		holder.appendChild(uploadButton);
+		holder.appendChild(input);
 
-		holder.contentEditable = true;
+		uploadButton.addEventListener('click', ceImage.uploadButtonClicked, false );
 
 		return holder;
 
@@ -26,11 +29,16 @@ var ceImage = {
 
 	},
 
-	/** */
 	save : function ( block ){
 
 	},
 
+	uploadButtonClicked : function(event){
+
+		cEditor.transport.selectAndUpload();
+
+	},
+
 	ui : {
 
 		holder : function(){
@@ -43,6 +51,14 @@ var ceImage = {
 
 		},
 
+		input : function(){
+
+			var input = document.createElement('INPUT');
+
+			return input;
+
+		},
+
 		uploadButton : function(){
 
 			var button = document.createElement('SPAN');