Add custom selectFiles

README.md

@@ -98,6 +98,7 @@ Image Tool supports these configuration parameters:
 | buttonContent | `string` | Allows to override HTML content of «Select file» button |
 | uploader | `{{uploadByFile: function, uploadByUrl: function}}` | Optional custom uploading methods. See details below. |
 | actions | `array` | Array with custom actions to show in the tool's settings menu. See details below. |
+| selectFiles | `function` | Optional custom file select method. If provided uploadByFile will be ignored. |
 
 Note that if you don't implement your custom uploader methods, the `endpoints` param is required.
 
@@ -161,6 +162,7 @@ This Tool returns `data` with following format
 This Tool works by one of the following schemes:
 
 1. Uploading files from the device
+2. Uploading files from a custom file picker
 2. Uploading by URL (handle image-like URL's pasting)
 3. Uploading by drag-n-drop file
 4. Uploading by pasting from Clipboard
@@ -197,6 +199,40 @@ The response of your uploader **should**  cover the following format:
 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 from a custom file picker
+
+Scenario:
+1. User clicks on «Select file» button
+2. Editor invokes `selectFiles` method provided in the config
+3. `selectFiles` returns a Promise that resolves with an array of files
+4. Image tool shows the image and stores the answer
+
+Code example:
+
+```js
+var editor = EditorJS({
+  ...
+
+  tools: {
+    ...
+    image: {
+      class: ImageTool,
+      config: {
+        selectFiles: () => {
+          return new Promise((resolve, reject) => {
+            const image = { url: "https://via.placeholder.com/150" };
+            const files = [image];
+            resolve(files);
+          });
+        }
+      }
+    }
+  }
+
+  ...
+});
+```
+
 ### Uploading by pasted URL
 
 Scenario:

src/index.js

@@ -63,6 +63,7 @@ import { IconAddBorder, IconStretch, IconAddBackground, IconPicture } from '@cod
  * @property {object} [uploader] - optional custom uploader
  * @property {function(File): Promise.<UploadResponseFormat>} [uploader.uploadByFile] - method that upload image by File
  * @property {function(string): Promise.<UploadResponseFormat>} [uploader.uploadByUrl] - method that upload image by URL
+ * @property {function(): Promise.<UploadResponseFormat>} selectFiles - method that selects images from a custom file manager
  */
 
 /**
@@ -150,6 +151,7 @@ export default class ImageTool {
       buttonContent: config.buttonContent || '',
       uploader: config.uploader || undefined,
       actions: config.actions || [],
+      selectFiles: config.selectFiles || undefined,
     };
 
     /**

src/uploader.js

@@ -41,9 +41,25 @@ export default class Uploader {
      * or default uploading
      */
     let upload;
+
+    // custom file select
+    if (this.config.selectFiles && typeof this.config.selectFiles === 'function') {
+      upload = this.config.selectFiles()
+        .then((files) => {
+          if (!files || !files[0]) {
+            return;
+          }
+
+          onPreview(files[0].url);
+
+          return {
+            success: 1,
+            file: files[0],
+          };
+        });
 
-    // custom uploading
-    if (this.config.uploader && typeof this.config.uploader.uploadByFile === 'function') {
+      // custom uploading
+    } else if (this.config.uploader && typeof this.config.uploader.uploadByFile === 'function') {
       upload = ajax.selectFiles({ accept: this.config.types }).then((files) => {
         preparePreview(files[0]);