Skip to main content

Configuring Callbacks

In this example, we will show you how to configure the CreativeEditor SDK.

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

Callbacks#

The CE.SDK offers several different callbacks that are triggered by user interaction. Follow this guide to see some examples with descriptions.

JavaScript
callbacks: {
log: (message, logLevel) => {
switch (logLevel) {
case "Info":
console.info(message)
break
case "Warning":
console.warn(message)
break
case "Error":
console.error(message)
break
default:
console.log(message);
}
},
onUnsupportedBrowser: () => {
window.alert('Browser is not supported!');
},
onBack: () => {
window.alert('Back callback!');
},
onClose: () => {
window.alert('Close callback!');
},
onSave: (scene) => {
window.alert('Save callback!');
console.info(scene);
},
onLoad: () => {
window.alert('Load callback!');
let scene = '...'; // Fill with sene
return Promise.resolve(scene);
},
onExport: (blobs, options) => {
window.alert('Export callback!');
console.info(options.mimeType)
console.info(options.quality)
constole.info(options.pages)
return Promise.resolve();
},
onUpload: (file, onProgress) => {
window.alert('Upload callback!');
let newImage = {
id: 'exampleImageIdentifier',
uri: 'https://YOURSERVER/images/file.jpg',
thumbUri: 'https://YOURSERVER/images/thumb.jpg',
}
return Promise.resolve(newImage);
}
},
ui: {
elements: {
navigation: {
action: {
close: true,
back: true,
save: true,
load: true,
export: true,
}
}
}
}
};

In this example, all corresponding navigational elements in the user interface are enabled so that the callbacks can be tested.

JavaScript
navigation: {
action: {
close: true,
back: true,
save: true,
load: true,
export: true,
}
}

General#

  • log: (message: string, level: LogLevel) => void will be triggered whenever CE.SDK wants to log any message. LogLevel is either Info, Warning, or Error.
JavaScript
log: (message, logLevel) => {
switch (logLevel) {
case "Info":
console.info(message)
break
case "Warning":
console.warn(message)
break
case "Error":
console.error(message)
break
default:
console.log(message);
}
},
  • onUnsupportedBrowser: (message: string, level: LogLevel) => void will be triggered when the browser version or type is unsupported.
JavaScript
onUnsupportedBrowser: () => {
window.alert('Browser is not supported!');
},
  • onBack: () => void allows the registration of a function that is called when the back action is triggered by the user.
JavaScript
onBack: () => {
window.alert('Back callback!');
},
  • onClose: () => void allows the registration of a function that is called when the close action is triggered by the user.
JavaScript
onClose: () => {
window.alert('Close callback!');
},

Scene Load & Save#

  • onSave: (scene: string) => Promise<void> allows the registration of a function that is called when the save button is triggered by the user. It contains the information of the current scene as a string that can be stored and reloaded at a later time. The user flow is continued when the returned Promise<void> is resolved. See Save Scenes for details.
JavaScript
onSave: (scene) => {
window.alert('Save callback!');
console.info(scene);
},
  • onLoad: () => Promise<string> allows the registration of a function that is called when the load button is triggered by the user. It returns a Promise<string> with the scene as string as payload. See Load Scenes for details.
JavaScript
onLoad: () => {
window.alert('Load callback!');
let scene = '...'; // Fill with sene
return Promise.resolve(scene);
},

Export & Upload#

  • onExport: (blobs: Blob[], options: ExportOptions) => void allows the registration of a function that is called when the export button is triggered by the user. It'll receive an array of Blob objects, one for each page that was selected for export. ExportOptions contains the mimeType, quality settings and pages that where selected for export. See Exporting Pages for details.
JavaScript
onExport: (blobs, options) => {
window.alert('Export callback!');
console.info(options.mimeType)
console.info(options.quality)
constole.info(options.pages)
return Promise.resolve();
},
  • onUpload: (file: File, onProgress: (progress: number) => void) => Promise<{id: string, uri:string, thumbUri: string}> allows the registration of a function that is called when the upload button is triggered by the user. The file parameter contains the data being uploaded via the upload dialog. The onProgress callback can be used to indicate progress to the UI, where a number of 1.0 equals 100 percent completion. The callback must return a Promise that must contain a unique id: string, the uri: string of the uploaded data, and the thumbUri: string. See Uploading Images for details.
JavaScript
onUpload: (file, onProgress) => {
window.alert('Upload callback!');
let newImage = {
id: 'exampleImageIdentifier',
uri: 'https://YOURSERVER/images/file.jpg',
thumbUri: 'https://YOURSERVER/images/thumb.jpg',
}
return Promise.resolve(newImage);
}
import 'https://cdn.img.ly/packages/imgly/cesdk-js/1.0.0/cesdk.umd.js';
let config = {
baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.0.0/assets',
callbacks: {
log: (message, logLevel) => {
switch (logLevel) {
case "Info":
console.info(message)
break
case "Warning":
console.warn(message)
break
case "Error":
console.error(message)
break
default:
console.log(message);
}
},
onUnsupportedBrowser: () => {
window.alert('Browser is not supported!');
},
onBack: () => {
window.alert('Back callback!');
},
onClose: () => {
window.alert('Close callback!');
},
onSave: (scene) => {
window.alert('Save callback!');
console.info(scene);
},
onLoad: () => {
window.alert('Load callback!');
let scene = '...'; // Fill with sene
return Promise.resolve(scene);
},
onExport: (blobs, options) => {
window.alert('Export callback!');
console.info(options.mimeType)
console.info(options.quality)
constole.info(options.pages)
return Promise.resolve();
},
onUpload: (file, onProgress) => {
window.alert('Upload callback!');
let newImage = {
id: 'exampleImageIdentifier',
uri: 'https://YOURSERVER/images/file.jpg',
thumbUri: 'https://YOURSERVER/images/thumb.jpg',
}
return Promise.resolve(newImage);
}
},
ui: {
elements: {
navigation: {
action: {
close: true,
back: true,
save: true,
load: true,
export: true,
}
}
}
}
};
CreativeEditorSDK.init('#cesdk_container', config).then((instance) => {
/** do something with the instance of CreativeEditor SDK **/
});