Open Cloud Edit Dynamically

Questions / Help
1

I’m working with the cloud edit tool and trying to launch the editor modal dynamically based on the image our user wants to edit, but I am getting the error “Cloud Image Editor activity params not found” when passing the internalID to the setCurrentActivity function.

I reviewed this article, but neither example seem to work.

Any help would be appriciated.

2

Hi @Reed_Fulghum, sorry for the delayed response! If this is still relevant, could you share your code so we can take a look?

3

Hey Alex,

No worries. Yes, this is still something that we are trying to implement. I’m running the code below on a click event listener. I’ve included the console errors in a screenshot as well.

I’m not currently storing the UploadCare internalId so I’m getting duplicate photos in the system when using addFileFromUrl. It would be amazing to load the cloud image edit from the photo url.

Thanks!

const photo = photoContainer.querySelector('img');
const photoUrl = photo.src;

const file = this.ctxApi.addFileFromUrl(photoUrl); //creates duplicate image in the system. store internalID to prevent duplication?

const internalId = file.internalId;
const internalEntry = this.ctxApi._uploadCollection.read(internalId);

this.ctxApi._ctx.$['*focusedEntry'] = internalEntry;
this.ctxApi.setCurrentActivity("cloud-image-edit");
//this.ctxApi.setCurrentActivity("cloud-image-edit", { internalId }); //new method

this.ctxApi.setModalState(true);

image
image1426×514 81.7 KB

4

Hey @Alex. Wanted to just bump this thread again to see if you’ve had a chance to review my previous comment.

5

Hi @Reed_Fulghum thanks for bumpint this!

The following code should work:

const photo = photoContainer.querySelector('img');
const photoUrl = photo.src;

// If the image is hossted on Uploadcare, use addFileFromCdnUrl to prevent duplication
// otherwise, use addFileFromUrl to upload it from external URL
const file = this.ctxApi.addFileFromCdnUrl(photoUrl);

const internalId = file.internalId;
const internalEntry = this.ctxApi._uploadCollection.read(internalId);

this.ctxApi.setCurrentActivity("cloud-image-edit", { internalId });

this.ctxApi.setModalState(true);

Please make sure that you’re using the latest version of File Uploader.

6

Awesome. Thanks, that solved my problem.

1 Like