Manage loading, uploads, and previews with the Visual Editor API

CloudCannon's Visual Editor API exposes methods for managing your integration's loading state, uploading files, and getting preview URLs. This article covers how to use each of these in your custom integration.

This article assumes you know how to initialize the Visual Editor API. For custom inline editing, read Create custom inline editing with the Visual Editor API. For a complete list of API objects and methods, please read our reference documentation on the Visual Editor API.

Control the loading state#

Calling *.setLoading() allows you to show or hide the Visual Editor's loading indicator. This is useful when your custom integration needs time to initialize.

const api = window.CloudCannonAPI.useVersion('v1', true);
await api.setLoading('Initializing custom integration...'); 

// Do async setup work

await api.setLoading(undefined); 

Upload a file#

Calling *.uploadFile() allows you to upload a file through CloudCannon's file handling system.

const input = document.querySelector('input[type="file"]'); 
const file = input.files[0]; 

const path = await api.uploadFile(file, undefined); 
console.log('Uploaded to:', path);

Get a preview URL#

Calling *.getPreviewUrl() allows you to get a working URL for a file that may not yet be committed to your Site, such as an image uploaded in the current editing session. Use this instead of the source path directly when displaying images in the Visual Editor.

const previewUrl = await api.getPreviewUrl('/images/hero.jpg');