Merge pull request #5 from codex-editor/paste-handlings

2.0.0: Paste handling, additional request params, custom button content

Author: neSpecc

.eslintrc

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "codex"
+  ]
+}

README.md

@@ -11,11 +11,12 @@ Image Block for the [CodeX Editor](https://ifmo.su/editor).
 - Uploading file from the device
 - Pasting copied content from the web
 - Pasting images by drag-n-drop
+- Pasting files and screenshots from Clipboard
 - Allows to add border, background
-- Allows to stretch image to the container's full-width 
+- Allows to stretch image to the container's full-width
 
 **Note** This Tool requires server-side implementation for file uploading. See [backend response format](#server-format) for more details.
-  
+
 ## Installation
 
 ### Install via NPM
@@ -52,29 +53,37 @@ Add a new Tool to the `tools` property of the CodeX Editor initial config.
 ```javascript
 var editor = CodexEditor({
   ...
-  
+
   tools: {
     ...
     image: {
       class: ImageTool,
       config: {
-        url: 'http://localhost:8008/', // Your backend uploader endpoint 
+        endpoints: {
+          byFile: 'http://localhost:8008/uploadFile', // Your backend file uploader endpoint
+          byUrl: 'http://localhost:8008/fetchUrl', // Your endpoint that provides uploading by Url
+        }
       }
     }
   }
-  
+
   ...
 });
 ```
 
-## Config Params 
+## Config Params
+
+Image Tool supports these configuration parameters:
 
 | Field | Type     | Description        |
 | ----- | -------- | ------------------ |
-| url   | `string` | **Required** Path for file uploading |
+| endpoints | `{byFile: string, byUrl: string}` | **Required** Endpoints for file uploading. <br> Contains 2 fields: <br> __byFile__ - for file uploading <br> __byUrl__ - for uploading by URL |
 | field | `string` | (default: `image`) Name of uploaded image field in POST request |
 | types | `string` | (default: `image/*`) Mime-types of files that can be [accepted with file selection](https://github.com/codex-team/ajax#accept-string).|
+| additionalRequestData | `object` | Object with any data you want to send with uploading requests |
+| additionalRequestHeaders | `object` | Object with any custom headers which will be added to request. [See example](https://github.com/codex-team/ajax/blob/e5bc2a2391a18574c88b7ecd6508c29974c3e27f/README.md#headers-object) |
 | captionPlaceholder | `string` | (default: `Caption`) Placeholder for Caption input |
+| buttonContent | `string` | Allows to override HTML content of «Select file» button |
 
 ## Tool's settings
 
@@ -116,10 +125,19 @@ This Tool returns `data` with following format
 
 ## Backend response format <a name="server-format"></a>
 
-This Tool works by following scheme:
+This Tool works by one of the following schemes:
+
+1. Uploading files from the device
+2. Uploading by URL (handle image-like URL's pasting)
+3. Uploading by drag-n-drop file
+4. Uploading by pasting from Clipboard
+
+### Uploading files from device <a name="from-device"></a>
+
+Scenario:
 
 1. User select file from the device
-2. Tool sends it to **your** backend 
+2. Tool sends it to **your** backend (on `config.endpoint.byFile` route)
 3. Your backend should save file and return file data with JSON at specified format.
 4. Image tool shows saved image and stores server answer
 
@@ -140,8 +158,24 @@ Response of your uploader **should** cover following format:
 
 **success** - uploading status. 1 for successful, 0 for failed
 
-**file** - uploaded file data. **Must** contain an `url` field with full public path to the uploaded image. 
-Also, can contain any additional fields you want to store. For example, width, height, id etc. 
-All additional fields will be saved at the `file` object of output data.    
+**file** - uploaded file data. **Must** contain an `url` field with full public path to the uploaded image.
+Also, can contain any additional fields you want to store. For example, width, height, id etc.
+All additional fields will be saved at the `file` object of output data.
+
+### Uploading by pasted URL
+
+Scenario:
+
+1. User pastes an URL of the image file to the Editor
+2. Editor pass pasted string to the Image Tool
+3. Tool sends it to **your** backend (on `config.endpoint.byUrl` route) via 'url' POST-parameter
+3. Your backend should accept URL, **download and save the original file by passed URL** and return file data with JSON at specified format.
+4. Image tool shows saved image and stores server answer
+
+Response of your uploader should be at the same format as described at «[Uploading files from device](#from-device)» section
+
+
+### Uploading by drag-n-drop or from Clipboard
 
- 
+Your backend will accept file as FormData object in field name, specified by `config.field` (by default, «`image`»).
+You should save it and return the same response format as described above.

dev/server.js

@@ -0,0 +1,194 @@
+/**
+ * Sample HTTP server for accept uploaded images
+ * [!] Use it only for debugging purposes
+ *
+ * How to use [requires Node.js 10.0.0+ and npm install]:
+ *
+ * 1. $ node dev/server.js
+ * 2. set 'endpoints' at the Image Tools 'config' in example.html
+ *   endpoints : {
+ *      byFile: 'http://localhost:8008/uploadFile',
+ *      byUrl: 'http://localhost:8008/fetchUrl'
+ *   }
+ *
+ */
+const http = require('http');
+const formidable = require('formidable');
+const { parse } = require('querystring');
+const fs = require('fs');
+const request = require('request');
+const crypto = require('crypto');
+
+class ServerExample {
+  constructor({port, fieldName}) {
+    this.uploadDir = __dirname + '/\.tmp';
+    this.fieldName = fieldName;
+    this.server = http.createServer((req, res) => {
+      this.onRequest(req, res);
+    }).listen(port);
+
+    this.server.on('listening', () => {
+      console.log('Server is listening ' + port + '...');
+    });
+
+    this.server.on('error', (error) => {
+      console.log('Failed to run server', error);
+    });
+  }
+
+  /**
+   * Request handler
+   * @param {http.IncomingMessage} request
+   * @param {http.ServerResponse} response
+   */
+  onRequest(request, response) {
+    this.allowCors(response);
+
+    const {method, url} = request;
+
+    if (method.toLowerCase() !== 'post') {
+      response.end();
+      return;
+    }
+
+    console.log('Got request on the ', url);
+
+    switch (url) {
+      case '/uploadFile':
+        this.uploadFile(request, response);
+        break;
+      case '/fetchUrl':
+        this.fetchUrl(request, response);
+        break;
+    }
+  }
+
+  /**
+   * Allows CORS requests for debugging
+   * @param response
+   */
+  allowCors(response) {
+    response.setHeader('Access-Control-Allow-Origin', '*');
+    response.setHeader('Access-Control-Allow-Credentials', 'true');
+    response.setHeader('Access-Control-Allow-Methods', 'GET,HEAD,OPTIONS,POST,PUT');
+    response.setHeader('Access-Control-Allow-Headers', 'Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers');
+  }
+
+  /**
+   * Handles uploading by file
+   * @param request
+   * @param response
+   */
+  uploadFile(request, response) {
+    let responseJson = {
+      success: 0
+    };
+
+    this.getForm(request)
+      .then(({files}) => {
+        let image = files[this.fieldName] || {};
+
+        responseJson.success = 1;
+        responseJson.file = {
+          url: image.path,
+          name: image.name,
+          size: image.size
+        };
+      })
+      .catch((error) => {
+        console.log('Uploading error', error);
+      })
+      .finally(() => {
+        response.writeHead(200, {'Content-Type': 'application/json'});
+        response.end(JSON.stringify(responseJson));
+      });
+  }
+
+  /**
+   * Handles uploading by URL
+   * @param request
+   * @param response
+   */
+  fetchUrl(request, response) {
+    let responseJson = {
+      success: 0
+    };
+
+    this.getForm(request)
+      .then(({files, fields}) => {
+        let url = fields.url;
+
+        let filename = this.uploadDir + '/' + this.md5(url) + '.png';
+
+        return this.downloadImage(url, filename)
+          .then((path) => {
+            responseJson.success = 1;
+            responseJson.file = {
+              url: path
+            };
+          });
+      })
+      .catch((error) => {
+        console.log('Uploading error', error);
+      })
+      .finally(() => {
+        response.writeHead(200, {'Content-Type': 'application/json'});
+        response.end(JSON.stringify(responseJson));
+      });
+  }
+
+  /**
+   * Accepts post form data
+   * @param request
+   * @return {Promise<{files: object, fields: object}>}
+   */
+  getForm(request) {
+    return new Promise((resolve, reject) => {
+      const form = new formidable.IncomingForm();
+
+      form.uploadDir = this.uploadDir;
+      form.keepExtensions = true;
+
+      form.parse(request, (err, fields, files) => {
+        if (err) {
+          reject(err);
+        } else {
+          console.log('fields', fields);
+          console.log('files', files);
+          resolve({files, fields});
+        }
+      });
+    });
+  }
+
+  /**
+   * Download image by Url
+   * @param {string} uri - endpoint
+   * @param {string} filename - path for file saving
+   * @return {Promise<string>} - filename
+   */
+  downloadImage(uri, filename) {
+    return new Promise((resolve, reject) => {
+      request.head(uri, function (err, res, body) {
+        request(uri).pipe(fs.createWriteStream(filename).on('erorr', reject))
+          .on('close', () => {
+            resolve(filename);
+          });
+      });
+    });
+  }
+
+  /**
+   * Generates md5 hash for string
+   * @param string
+   * @return {string}
+   */
+  md5(string) {
+    return crypto.createHash('md5').update(string).digest('hex');
+  }
+}
+
+new ServerExample({
+  port: 8008,
+  fieldName: 'image'
+});