CESDK/CE.SDK/Web Editor/Guides

Use the API to refresh the Asset Library

Learn how to refresh the asset library in the CreativeEditorSDK on demand.

In this example, we explain how to use the refetchAssetSources API to refresh the asset library after a specific action is 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 refetchAssetSources API will trigger a refetch of the asset source and update the asset library panel with the new items accordingly and can be used like the following:

JavaScript


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

// To refetch multiple asset sources, you can pass an array containing the IDs of the asset sources
cesdk.refetchAssetSources(['ly.img.video.upload', 'ly.img.image.upload']);

// To refetch all asset sources, you can call the API without any parameters
cesdk.refetchAssetSources();

Prerequisites#

1. Add the CreativeEditorSDK to Your Project#

NPM

Yarn


npm install --save @cesdk/engine@1.31.0

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.

JavaScript


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 refetchAssetSources API to refresh the cloudinary-images asset source and update the asset panel with the new items.

JavaScript


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.refetchAssetSources('cloudinary-images');
      }
    }
  );

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