Adding Image Upload Support

Giving your users the option to use their own images within their creations will boost their creative output to new levels. While CE.SDK handles the bulk of the uploading process, handling the uploaded files requires implementing the onUpload callback on your side.

Local Uploads#

To quickly get going, you may want to use the localUpload callback, that ships with CE.SDK and allows uploading images locally. To do so, pass local for the callbacks.onUpload configuration setting:

callbacks: {
    ...
    onUpload: 'local'
}

This enables the "Add file" button within the image library but only stores the uploaded files locally. Therefore they won't be available when opening the same scene in a different environment or after a page reload.

Remote Uploads#

To manage uploads within your application, you may provide an onUpload handler that processes the received file somewhere appropriate and returns an object describing the stored image:

callbacks.onUpload = (file) => {
  // Handle the received `File` object
  window.alert('Upload callback triggered!');

  // For example, upload the file to your server
  const newImage = {
    id: 'uniqueImageIdentifier', // A unique ID for the uploaded image
    meta: {
      uri: 'https://YOURSERVER/images/file.jpg', // Fully qualified URL to the image source, e.g., `http://yourdomain.com/image.png`
      thumbUri: 'https://YOURSERVER/images/thumb.jpg' // Fully qualified URL to a thumbnail version of the image
    }
  };

  // Usually, return a Promise that resolves with the new image object
  return Promise.resolve(newImage);
};

Once provided, the "Add file" button will be visible to your users and they can start adding images to their creations.