Configuring onApply on image editor when using grapesjs studio sdk

[canlasnikko]

Hi Community!

I have a custom logic when uploading images. I need to store them on a public location so it's always accessible when rendering the HTML.

The problem is when I use the image editor. When an edit is saved, it default save goes to "assets/xxxx123.png". This breaks the image when I use the HTML only outside the editor.

<div id="id1b" class="gjs-grid-column"><img id="inv6f" src="assets/1739114565_67a8c8458b584.png"/></div>

I can't seem to find the option to handle the logic on when the edits to the image is applied at least in the docs.

My goal is to apply my custom logic when an image is edited so I can save it to a public location too.

<div id="iysjk" class="gjs-grid-column"><img id="igl05" src="http://localhost/uploads/page-builder/Landing page template-1739114565/1739114565_67a8c8458b584.png"/>

Any help and discussion is appreaciated :)

[canlasnikko]

I think I'm able to find a way to do this and I want to share this. Might be helpful:

First, installed and imported grapesjs-tui-image-editor.

Then on the createStudioEditor config, I've added gjsOptions and imported the plugin and added the plugin options like this:

createStudioEditor({
  ...some other options
  gjsOptions: {
    plugins: [tuiImageEditorPlugin],
    pluginsOpts: {
      [tuiImageEditorPlugin]: {
        labelApply: 'Test Apply',
        onApply: async (imageEditor, imageModel) => {
          // In my case, I need to convert it to a File for uploading. I've used dataUriToBuffer for this.
          const file = base64ToFile(imageEditor.toDataURL()); 
          // Upload file via API
          const result = await uploadAsset(projectId, [file]);
        },
        addToAssets: false,
        upload: true,
      },
    },
  }
})

My next goal is to update the asset manager to show the edited image and also update the block. Will update this once I have some idea.

[canlasnikko]

Or better...

Just set the upload property of grapesjs-tui-image-editor plugin to true like this:

[tuiImageEditorPlugin]: {
  labelApply: 'Test Apply',
  addToAssets: false,
  upload: true,
},

and properly setup onUpload in createStudioEditor asset property, it should go to that function once the apply button in clicked in the image editor

createStudioEditor({
  ...some other options
  assets: {
    storageType: 'self',
    onUpload: async ({ files }) =>
      await uploadAsset(props.template.id, files),
    onDelete: async ({ assets }) => await deleteAsset(assets),
  },
})