Changes to images with Image Editor in File Uploader, don't transfer to the final files

Questions / Help
,
1

Hello,
I’m new here - so I might be doing something dumb, but i’m trying to use the CDN import option for file uploads on my webflow site. It installs fine, looks great, functions great, but the changes the user makes in the upload modal don’t carry over to final images. I see them in the preview, but final image in Uploadcare is care is the just original upload.

It’s telling me to use this CDN import if that has anything to do with it. Any ideas?
https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.35.2/web/lr-file-uploader-regular.min.js

2

Hi @Michael_Wilson, the uploader doesn’t modify images in place. Instead, it uploads the original image, gets its CDN URL, and when transformations are applied via the UI, the uploader generates a URL containing the applied transformations. You can obtain the final URL using the uploader’s API and events.

Here’s a demo to show how it works
https://codesandbox.io/p/sandbox/image-editor-cdn-url-demo-qfp7vp?file=%2Findex.html%3A43%2C1

3

Thanks @Alex!

I’m trying to get those events in browser to update elements on the page? Any advice on how I would get this script working? I’m stuck. I want it to grab returns from the event and populate items in my HTML.

<lr-upload-ctx-provider ctx="my-uploader"></lr-upload-ctx-provider>

<script>
    const ctxProvider = document.querySelector('lr-upload-ctx-provider')
ctxProvider.addEventListener('common-upload-success', event => {
    const files = event.detail.successEntries;
    if (files.length > 0) {
        document.getElementById("uuid-field").value = files[0].uuid;
        document.getElementById("url-field").value = files[0].cdnUrl;
    }
});
</script>
4

The script looks correct and should work. The only thing to notice is that the common-upload-success fires only when all entries have been uploaded successfully. If there are any failed uploads, the event will never be dispatched. You might need to use the change event instead.

5

Hey Alex,
I figured it out, ctx=“my-uploader” needed to be, ctx-name=“my-uploader”.
Question though, I still haven’t figured out how to get the edited url back instead of the base file url. The reflected HTML elements in my page aren’t registering the image update changes, which is my goal.
Would you be able to point me in the right direction?

6

Sorry, I missed the ctx. It indeed must be ctx-name. I have updated the code demo to show how you can use the change event to get CDN URLs of uploaded files and updated URLs after editing to reflect the changes on the page. https://codesandbox.io/p/sandbox/image-editor-cdn-url-demo-qfp7vp?file=%2Findex.html

7

I’m getting a ‘Sandbox not found’ error on that link. Am I doing something wrong?

8

Sorry, try this one, it should work https://codepen.io/optlsnd/pen/PogvjwR?editors=1010