Skip to main content
CESDK/Web/Guides
Language:

Using a custom URI resolver

CE.SDK gives you full control over how URIs should be resolved. To register a custom resolver, use setURIResolver and pass in a function implementing your resolution logic. If a custom resolver is set, any URI requested by the engine is passed through the resolver. The URI your logic returns is then fetched by the engine. The resolved URI is just used for the current request and not stored. If, and only if, no custom resolver is set, the engine performs the default behaviour: absolute paths are unchanged and relative paths are prepended with the value of the ubq://basePath setting.

Warning#

Your custom URI resolver must return an absolute path with a scheme.

Explore a full code sample of the integration on CodeSandbox or view the code on GitHub.

We can preview the effects of setting a custom URI resolver with the function getAbsoluteURI.

Before setting a custom URI resolver, the default behavior is as before and the given relative path will be prepended with the contents of ubq://basePath.

To show that the resolver can be fairly free-form, in this example we register a custom URI resolver that replaces all .jpg images with our company logo. The resolved URI are expected to be absolute.

Given the same path as earlier, the custom resolver transforms it as specified. Note that after a custom resolver is set, relative paths that the resolver does not transform remain unmodified.

To remove a previously set custom resolver, call the function with a null value. The URI resolution is now back to the default behavior.

File:
import 'https://cdn.img.ly/packages/imgly/cesdk-js/1.7.0/cesdk.umd.js';
let config = {
baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.7.0/assets',
};
CreativeEditorSDK.init('#cesdk_container', config).then((instance) => {
/** This will return 'https://cdn.img.ly/packages/imgly/cesdk-js/1.7.0/assets/banana.jpg'. */
instance.engine.editor.getAbsoluteURI('/banana.jpg')
/** Replace all .jpg files with the IMG.LY logo! **/
instance.engine.editor.setURIResolver((uri) => {
if (uri.endsWith('.jpg')) {
return 'https://img.ly/static/ubq_samples/imgly_logo.jpg'
}
return uri
})
/**
* The custom resolver will return a path to the IMG.LY logo because the given path ends with '.jpg'.
* This applies regardless if the given path is relative or absolute.
*/
instance.engine.editor.getAbsoluteURI('/banana.jpg')
/** The custom resolver will not modify this path because it ends with '.png'. */
instance.engine.editor.getAbsoluteURI('https://example.com/orange.png')
/** Because a custom resolver is set, relative paths that the resolver does not transform remain unmodified! */
instance.engine.editor.getAbsoluteURI('/orange.png')
/** Removes the previously set resolver. */
instance.engine.editor.setURIResolver(null)
/** Since we've removed the custom resolver, this will return 'https://cdn.img.ly/packages/imgly/cesdk-js/1.7.0/assets/banana.jpg' like before. */
instance.engine.editor.getAbsoluteURI('/banana.jpg')
});