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) => {
  /* Do something with the received `File` object */

  return {
    id, // A unique ID identifying the uploaded image
    name, // An optional name describing the image
    meta: {
      uri, // A fully qualified URL pointing at the source of the image, e.g. `http://yourdomain.com/image.png`
      thumbUri // A fully qualified URL pointing at a version of source of the image, that's suitable for thumbnails
    }
  }
}

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