Skip to content

Refresh Assets

In this example, we explain how to use the assetSourceContentsChanged API to notify the engine that asset content has been updated after a specific action has been taken.

By default, the CreativeEditorSDK takes care of refreshing the asset library entries in most cases. For example, when uploading or deleting elements. In other cases, however, we might need to refresh the asset library on demand. An example would be a custom asset source that can be updated from outside the CreativeEditorSDK.

API Signature

The assetSourceContentsChanged API will notify the engine about the asset source update which in turn will update the asset library panel with the new items accordingly. It can be used like the following:

// To refetch a specific asset source, you can pass the ID of the asset source as a parameter
cesdk.engine.asset.assetSourceContentsChanged('ly.img.audio.upload');

Prerequisites

1. Add the CreativeEditorSDK to Your Project

Terminal window
npm install @imgly/cesdk
# or
yarn add @imgly/cesdk
Terminal window
npm install @imgly/cesdk
# or
yarn add @imgly/cesdk

2. Configure a custom asset source

We will take Cloudinary as an example by adding a custom asset source to the configuration. Check out the Customize The Asset Library guide for detailed information about adding customizing the asset library.

const config = {
  /* ...configuration options */
  assetSources: {
    'cloudinary-images': {
      findAssets: () => {
        /* fetch the images from Cloudinary to display in the asset panel */
      },
    },
  },
  ui: {
    elements: {
      libraries: {
        insert: {
          /* append the Cloudinary asset source to the image asset library entry */
        },
      },
    },
  },
};

3. Refresh the asset source when a new image is uploaded

Let’s consider that an image can be uploaded to Cloudinary from our application outside of the context of the CreativeEditorSDK. In this case, we can use the assetSourceContentsChanged API to refresh the cloudinary-images asset source and update the asset panel with the new items.

CreativeEditorSDK.create(config).then(async instance => {
  await instance.createDesignScene();
  // create a Cloudinary upload widget
  const myWidget = cloudinary.createUploadWidget(
    {
      cloudName: 'my-cloud-name',
    },
    (error, result) => {
      if (!error && result && result.event === 'success') {
        // refresh the asset panel after the image has been successfully uploaded
        instance.engine.asset.assetSourceContentsChanged('cloudinary-images');
      }
    },
  );


  // attach the widget to the upload button
  document.getElementById('upload_widget').addEventListener('click', () => {
    myWidget.open();
  });
});