Editing and existing photo using the widget

Gabriel Barreto

December 26, 2018 10:58

Hi, i have a simple application in angular 5.x and i'm using the web widget for uploading files. As said in the widget documentation in the .open() method i can pass an object with a files property that receives a URL so it'll automatically open that picture in the widget to crop and save. Here's my current code for this:

 

let widget = cloudinary.createUploadWidget({

  sources: ["url"],

  upload_preset: "agendamentovip-preset",

  cropping: "server",

  cropping_coordinates_mode: "custom",

  croppingAspectRatio: 0.5,

  folder: `app/${user.storeKey}`,

  text: this.translations,

  theme: "white"

}, (error,result) => {

  if(result) {

    let url:string=result[0].path;

    url=url.split(user.storeKey)[1];

    this.banners[index].image=url.slice(1,url.length);

  }

});

widget.open(null,{files: [url]});

 

My url comes in my method's parameter, but iy doesn't open the widget with the pic passed, it simpy opens with the url input. This URL is a valid Cloudinary file URL with .png extension.

 

What i need to do is open an existing file so the user can crop it again if necessary. What am i doing wrong?

0

• Official comment

  

  Erwin Lukas

  December 26, 2018 19:51 Edited

  Hi Gabriel,

  Thank you for reaching out to us. We are aware of this limitation with Upload Widget v2. We have made aware to our engineer and they are looking into this.

  In the mean time you can try using our Upload Widget v1 as a workaround.
  Below is the example of the code:

  <script type="text/javascript">
      var widget;
      var init = function() {
          widget = cloudinary.createUploadWidget({
              cloud_name      : '<cloud_name>',
              upload_preset   : '<upload_preset>,
              cropping        : 'server',
          }, function( error, result ) {
              console.error(error);
              console.log(result);
          });
  
          $('#openWidget').on('click', function() {
              widget.open();
          });
  
          $('#recrop').on('click', function() {
              widget.open({file:"https://shoptiques.s3.amazonaws.com/docs/sample.jpg"});
          });
      }
  
      $(init);
  </script>
  

  I realize this is less than an ideal solution, and hopefully it is sufficient for what you are looking for.

  we will provide an update once v2 is resolved
• 

  Ido

  January 29, 2019 10:24

  Hi Gabriel,

  I'm circling back to let you know that using the upload widget's cropping with a predefined url now works as expected.

  I hope this would help your use case

  0

Post is closed for comments.