@newelement i am facing the same issue right now. I have implemented a Media Library where i can reuse photos from. I want user to pick image from Library from a modal.

Well going through the source now though. If i get something cool from there i will definitely open a pull request for the functionality.

+1 Any updates guys?

Hi,

You can achieve that by adding to the Uploader a new custom method which return the data from your image picker then pass this method to the constructor of the UI object.

Let's say I have a new method loadIframeImagePicker(pageId, callback) which call callback then return the result of callback which look like that return { success: true, file: { url: src } };

then in Ui() instantiation in the Image constructor, call your new method in the onSelectFile event :

/**
     * Module for working with UI
     */
    this.ui = new Ui({
      api,
      config: this.config,
      onSelectFile: () => {
        console.log(this.config);
        this.loadIframeImagePicker(this.config.pwconfig.editorjs.pageid, this.config.pwconfig.callback);
      }
    });

If you want a concrete example, refer to this post on ProcessWire forum : Load IFrame Native Image Picker

Hello @newelement, I opened the above pull request which will permit us do the following, hope it helps.

I use this on my website, and it works perfectly.

const imageToolConfig = {
  class: EditorJSImage,
  config: {
    onSelectFile: tool => {
      toggleLibrary(img => {
        const data = tool.data;

        data.file = img; // set image
        data.caption = data.caption || img.meta;

        tool.data = data;
        toggleLibrary(undefined);
      });
      },
    uploader: {
       uploadByFile: ...
       uploadByUrl: ...
    }
  }
}

Would be nice feature indeed

@mernxl Hi could you please provide an example for toggleLibrary?