diff --git a/README.md b/README.md index 2d620306..96fc385a 100644 --- a/README.md +++ b/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: diff --git a/src/index.js b/src/index.js index 2bf61c42..001b9091 100644 --- a/src/index.js +++ b/src/index.js @@ -63,6 +63,7 @@ import { IconAddBorder, IconStretch, IconAddBackground, IconPicture } from '@cod * @property {object} [uploader] - optional custom uploader * @property {function(File): Promise.} [uploader.uploadByFile] - method that upload image by File * @property {function(string): Promise.} [uploader.uploadByUrl] - method that upload image by URL + * @property {function(): Promise.} 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, }; /** diff --git a/src/uploader.js b/src/uploader.js index bfa6e2a5..6c9caa74 100644 --- a/src/uploader.js +++ b/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]);