Need help customize the image toolbar button to load an url asynchronously

[rhlc]

Can someone please elaborate the custom image url loading part?

As shown in screen shot the docs are really not helpful.

Thanks.

[karthikcodes6]

You can optionally pass a callback to the image upload plugin

 createImagePlugin({
    uploadImage: handleUploadImage
  })

The callback should be like this

const handleUploadImage = async (e) => {
  const data = new FormData();
  data.append('image', e);
  const response = await API.post('/upload/file', data, {
    headers: { ['Content-Type']: 'multipart/form-data' }
  });
  return response.data?.data?.message;
};

You should return the url after uploaded to the storage service.

[ashikraj78]

How can we make customize toolbar for image upload?

[karthikcodes6]

If you want to customize you can implement a UI component on your own. But the improved image plugin UI is WIP here

[rhlc]

Thanks for replying @karthikcodes6, I did added the said callback, but still getting prompt to paste URL instead of uploading image from system.

[karthikcodes6]

Welcome :)

[hdck007]

@rhlc in my case I saved the editor location and manually added the images using insertnodes

[woodpeng]

You might want to fork this image-ui package and customize as per you requirement. You can show the popup to upload image if the image url is null. And after uploading the image you can hide the toolbar and show the image.

is this package removed? what's the working solution for image/file choose component now?

[danielbayerlein]

@woodpeng Are you looking for https://github.com/udecode/plate/tree/main/packages/ui/nodes/image?

[woodpeng]

@danielbayerlein I added a file chooser to picker local file and upload it to server, then insert the returned url to editor. Thanks!