Update insert image action: support uploading local image

.gitignore

@@ -1,2 +1,3 @@
 .DS_Store
 node_modules
+.vscode

README.md

@@ -44,7 +44,7 @@ Included actions:
 - Code
 - Horizontal Rule
 - Link
-- Image
+- Image (support uploading)
 
 Other available actions (listed at https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand):
 - Justify Center

demo.html

@@ -50,6 +50,11 @@ <h3>HTML output:</h3>
         onChange: function (html) {
           document.getElementById('text-output').innerHTML = html
           document.getElementById('html-output').textContent = html
+        },
+        // if you want to upload image to server
+        // you must config this
+        upload: {
+          api: 'http://localhost:53595/api/files/img/upload'
         }
       })
     </script>

dist/pell.js

@@ -138,10 +138,63 @@ var defaultActions = {
     icon: '📷',
     title: 'Image',
     result: function result() {
-      var url = window.prompt('Enter the image URL');
-      if (url) exec('insertImage', url);
+      // const url = window.prompt('Enter the image URL')
+      // if (url) exec('insertImage', url)
+      execInsertImageAction();
     }
   }
+
+  // default for not set `upload` config
+};var execInsertImageAction = function execInsertImageAction() {
+  var uploadImageInput = document.querySelector('.pell input[type="file"]');
+  if (!uploadImageInput) {
+    var url = window.prompt('Enter the image URL');
+    if (url) exec('insertImage', url);
+  } else {
+    uploadImageInput.click();
+  }
+};
+
+// just set `url`, `method` and `body` for fetch api
+var uploadImage = function uploadImage(_ref, success, error) {
+  var api = _ref.api,
+      data = _ref.data;
+
+  window.fetch && window.fetch(api, {
+    method: 'POST',
+    body: data
+  }).then(function (res) {
+    return res.json();
+  }).then(function (data) {
+    // responsive data format:
+    // { success: true, url: 'xxx' }
+    if (data.success) success(data.url);
+  }, function (err) {
+    return error(err);
+  });
+};
+
+var initUploadImageInput = function initUploadImageInput(settings) {
+  var uploadAPI = settings.upload && settings.upload.api;
+  if (uploadAPI) {
+    var input = createElement('input');
+    input.type = 'file';
+    input.hidden = true;
+    addEventListener(input, 'change', function (e) {
+      var image = e.target.files[0];
+      var fd = new window.FormData();
+      fd.append('pell-upload-image', image);
+      uploadImage({
+        api: uploadAPI,
+        data: fd
+      }, function (url) {
+        return exec('insertImage', url);
+      }, function (err) {
+        return window.alert(err);
+      });
+    });
+    appendChild(settings.element, input);
+  }
 };
 
 var defaultClasses = {
@@ -170,8 +223,8 @@ var init = function init(settings) {
   var content = settings.element.content = createElement('div');
   content.contentEditable = true;
   content.className = classes.content;
-  content.oninput = function (_ref) {
-    var firstChild = _ref.target.firstChild;
+  content.oninput = function (_ref2) {
+    var firstChild = _ref2.target.firstChild;
 
     if (firstChild && firstChild.nodeType === 3) exec(formatBlock, '<' + defaultParagraphSeparator + '>');else if (content.innerHTML === '<br>') content.innerHTML = '';
     settings.onChange(content.innerHTML);
@@ -212,6 +265,9 @@ var init = function init(settings) {
   if (settings.styleWithCSS) exec('styleWithCSS');
   exec(defaultParagraphSeparatorString, defaultParagraphSeparator);
 
+  // init a upload image input or not
+  initUploadImageInput(settings);
+
   return settings.element;
 };
 

src/pell.js

@@ -85,12 +85,67 @@ const defaultActions = {
     icon: '📷',
     title: 'Image',
     result: () => {
-      const url = window.prompt('Enter the image URL')
-      if (url) exec('insertImage', url)
+      // const url = window.prompt('Enter the image URL')
+      // if (url) exec('insertImage', url)
+      execInsertImageAction()
     }
   }
 }
 
+// default for not set `upload` config
+const execInsertImageAction = function () {
+  const uploadImageInput = document.querySelector('.pell input[type="file"]')
+  if (!uploadImageInput) {
+    const url = window.prompt('Enter the image URL')
+    if (url) exec('insertImage', url)
+  } else {
+    uploadImageInput.click()
+  }
+}
+
+// just set `url`, `method` and `body` for fetch api
+const uploadImage = function ({ api, data }, success, error) {
+  window.fetch && window.fetch(
+    api,
+    {
+      method: 'POST',
+      body: data
+    }
+  )
+    .then(res => res.json())
+    .then(
+      data => {
+        // responsive data format:
+        // { success: true, url: 'xxx' }
+        if (data.success) success(data.url)
+      },
+      err => error(err)
+    )
+}
+
+const initUploadImageInput = function (settings) {
+  const uploadAPI = settings.upload && settings.upload.api
+  if (uploadAPI) {
+    const input = createElement('input')
+    input.type = 'file'
+    input.hidden = true
+    addEventListener(input, 'change', e => {
+      const image = e.target.files[0]
+      const fd = new window.FormData()
+      fd.append('pell-upload-image', image)
+      uploadImage(
+        {
+          api: uploadAPI,
+          data: fd
+        },
+        url => exec('insertImage', url),
+        err => window.alert(err)
+      )
+    })
+    appendChild(settings.element, input)
+  }
+}
+
 const defaultClasses = {
   actionbar: 'pell-actionbar',
   button: 'pell-button',
@@ -155,6 +210,9 @@ export const init = settings => {
   if (settings.styleWithCSS) exec('styleWithCSS')
   exec(defaultParagraphSeparatorString, defaultParagraphSeparator)
 
+  // init a upload image input or not
+  initUploadImageInput(settings)
+
   return settings.element
 }
 

src/pell.scss

@@ -38,4 +38,4 @@ $pell-content-padding: 10px !default;
 
 .pell-button-selected {
   background-color: $pell-button-selected-color;
-}
+}