How to use with existing file manager

[newelement]

Sorry is this is obvious, but I cannot wrap my head around making custom blocks. I have an existing file manager in a CMS I'm working on. Is there a callback I can use to insert a block with the image I pick from my file manager?

[mernxl]

@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.

[waynehaffenden]

+1 Any updates guys?

[flydev-fr]

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

[mernxl]

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: ...
    }
  }
}

[O4epegb]

Would be nice feature indeed

[MohmmedAshraf]

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