Open crop window directly

#1

Hi,

I am using the plugin for making multi upload, now I am able to get the preview of the all the images using the awesome uploadcare widget.

Now I want to open the crop window directly when user click on the Image, but I am not able to do so, is there any way to open the crop window directly using the JS code.

Thank You

#2

Hi!

You can open the dialog with predefined crop settings by clicking on an image on your page (or any html element you add the click event listener to). See the reference here:

#3

Hi Achermenko,

I tried that API, but it is not working for multiple upload. Let me explain you better I have a uploadcare multi-widget instance running.

Now once the images are selected I am printing all the selected images in the div. Now I want such that when user click on one image, it open the image in crop window directly.

Right now I am using a different instance of the uploadcare (for croping image) and then uploading the image in the multi-widget instance.

Is there any way to open crop preview for a specific image uploaded in multi preview directly. I can create a demo if you are not able to understand my question.

Thank You

#4

@swouden the cropping mode can be forced in single widget only. If you have a chance to make a demo, I’ll look into it and try to find a solution for you.

#5

@Alex is there any way to force cropping mode in multiple file widget ? Thanks

#6

@simzen85 unfortunately, no. We’re going to fix this in the next major version of the widget. Currently, I can only suggest adding a hint to inform users that they have to click on an image in the list to crop it.

#7

Hello ,
Is possible now with the v3 ?
Thank you :slight_smile:

#8

Hi @Remi_w,

In v3 you still have to click on an image from the list to get to cropping. Can you tell me a little bit about how you’re using crop and what do you want to improve in the workflow?

#9

Maybe i use the wrong way. I want to open one image rendered (of multiple) directly on the filter pannel of this image. At the same time as using multiple widget.

#10

So, I have the same issue than Swouden. I use multiplewidget, and i want open dialog on this tab effects :

uploadcareissue
uploadcareissue.jpg1063×581 44.6 KB

via JS eventlistener with the uuid like :
https://ucarecdn.com/a668035f-7465-4e50-a97d-68fc93113733/
or
a668035f-7465-4e50-a97d-68fc93113733
or
https://ucarecdn.com/663a0e27-49e4-42bd-8630-1153f152c544~3/nth/2/

The code gonnna look like this:

document.querySelector(".img").addEventListener("click", (e) => { 

    var uuid_img =   /* code get uuid of current img*/ ;
  
    multiWidget.openDialog(function(dialogApi) {
        dialogApi.switchTab('preview',uploadcareTabEffects, uuid_img);
    });
});
#11

I think I have a similar requirement to other folks in the list. On our website clients can upload up to 12 images for an entry, but also need to make thumbnails of each one in a specific aspect ratio. In our current system they tend to upload all twelve in one go and then are presented with 12 crop operations and can’t leave the workflow until all 12 are complete.

It could be as simple as not allowing “done” to be pressed until all the crop operations are done in the list.