Skip to main content

Can I use the upload widget to re-edit the uploaded image?

Shirly Manor
Updated

If you would like to allow users to first upload and crop an image via the upload widget. Then instead of uploading the same image let them re-edit. You can save the uploaded image as a variable and open it onclick.

 

var preWidget = cloudinary.createUploadWidget({
 cropping: 'server',
 upload_preset: upload_preset },
function(error, result) {
   $("#open_pre_widget1").on("click", function() { 
   preWidget.open({file: result[0].secure_url}); 
 });
});

Here is a sample code:

https://jsfiddle.net/ssnooadv/

Related articles

Comments

2 comments

Date Votes
  • Marcio Ber

    Hi, Shirly Manor.

    Thanks for this article.

    I can't make it work for Widget V2.

    Should it work in the same way?

     

    0
  • Eyal Katz Talmon
    Edited

    Hi Marcio, version 2 of the widget introduced some architectural changes and indeed the code suggested above does not work with it. Try using the following -

    var cloud_name = '<cloud-name>';
    var upload_preset = '<preset>';

    cloudinary.setCloudName(cloud_name);

    var preWidget = cloudinary.createUploadWidget({
        cropping: 'server',
        upload_preset: upload_preset
    }, function(error, result) {
        if (result.event === "success") {
            $("#open_pre_widget1").on("click", function() { 
                preWidget.open(null, {files: [result.info.secure_url]}); 
            });
        }
    });
     
    $("#open_pre_widget0").on("click", function() { 
        preWidget.open(); 
    });
    0

Please sign in to leave a comment.