Files are uploaded instantly and image editor settings are not applied

Questions / Help
1

My head:
<script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js"></script>
<script src="https://ucarecdn.com/libs/widget-tab-effects/1.x/uploadcare.tab-effects.lang.en.min.js"></script>

<script>
    uploadcare.registerTab('preview', uploadcareTabEffects)

</script>

BODY:
<input
type=“hidden”
role=“uploadcare-uploader”
data-public-key="*******"
data-multiple=“true”
data-tabs=“file camera url facebook gdrive gphotos”
data-effects=“crop, grayscale, sharp”
/>

So the problem is that files are uploaded instantly to uploadcare when selected from a computer. So I dont even have to press add button. The problem is that because files are instantly uploaded, image editing (crop, greyscale…) are not affected because the image is already uploaded.

I have tried everything I know, could someone help me out. So I want upload to wait that all cropping etc are done and when pressed “ADD” only then files are uploaded or at least replaced with edited ones.

2

Hi @Mikko_Kankainen,

This is the expected behavior. The widget always uploads the original image, but it returns a URL with effects like this

https://ucarecdn.com/71109294-0c9b-492d-8e10-a93155cf8ef0/-/crop/394x524/142,52/-/preview/-/enhance/72/-/blur/25/

This URL will be set as a value of the widget’s hidden input element, and you can also get it programmatically using the JS API of the widget

const widget = uploadcare.Widget("[role=uploadcare-uploader]");

widget.onUploadComplete((fileInfo) => {
  console.log("Image uploaded: " + fileInfo.cdnUrl);
});

Check out this live example.

1 Like