[Support] Image Plugin configuration

[aurelienblais]

Hi,

I need some help with the Image Plugin configuration. Here's my current "ImageModule" file

import {NgModule} from '@angular/core';
import {EDITOR_JS_TOOL_INJECTOR, PLUGIN_CONFIG, PluginTypes} from '@tinynodes/ngx-editorjs-plugins';
import Image from '@editorjs/image';

@NgModule({
  providers: [{
    provide: EDITOR_JS_TOOL_INJECTOR,
    useValue: Image,
    multi: true
  }, {
    provide: PLUGIN_CONFIG,
    useValue: {
      key: 'image',
      type: PluginTypes.Block,
      pluginName: 'EditorJS Image',
      config: {
        uploader: {
          uploadByFile(file) {
            this.attachmentSvc.create(file).subscribe((e: any) => {
              return {
                success: 1,
                file: {
                  url: e.filePath
                }
              };
            });
          }
        }
      }
    },
    multi: true
  }]
})
export class ImageModule {
}

The configuration is correctly injected and loaded by the library, but I need help to setup the "AttachmentService" call, which currently fail (as the service does'nt export any static method as it make use of the project Apollo-client instance).

Is there any way to call non-static method from the config ? If there's no workaround, how are we supposed to make our custom upload logics ?

Thanks for your help

[wSedlacek]

Hey @aurelienblais Not sure if you are still working on this but I figured I would follow up with you since I believe I figured out a solution for you.

In order to gain access to the attachmentSvc you would probably need to use a useFactory with deps rather then useValue

Example image-plugin.factory.ts

export const imagePluginFactory = (attachmentSvc: AttachmentService) => ({
      key: 'image',
      type: PluginTypes.Block,
      pluginName: 'EditorJS Image',
      config: {
        uploader: {
          uploadByFile(file) {
           attachmentSvc.create(file).subscribe((e: any) => {
              return {
                success: 1,
                file: {
                  url: e.filePath
                }
              };
            });
          }
        }
      }
    });

import { imagePluginFactory } from './image-plugin.factory';

@NgModule({
  providers: [{
    provide: EDITOR_JS_TOOL_INJECTOR,
    useValue: Image,
    multi: true
  }, {
    provide: PLUGIN_CONFIG,
    useFactory: imagePluginFactory,
    deps: [AttachmentService],
    multi: true
  }]
})
export class ImageModule {
}

Check out the documentation at https://angular.io/guide/dependency-injection-providers#factory-providers

You could even assign the uploader as the entire attachmentSvc then have that service have a method titled uploadByFile (You would probably want to build an interface that you implement like OnInit to ensure any services built this way work as expected)