Upload widget: how to get delete link to appear next to thumbnails?

Comments

8 comments

  • Avatar
    Itay Taragano

    Please go to your account's Upload presets settings, click on 'Edit' next to the upload preset you're using. Then under the 'Upload Control' section set 'Return delete token' to 'Yes'. This returns a token with each upload which allows to delete images for a limited time of 10 minutes after they're uploaded.

    0
    Comment actions Permalink
  • Avatar
    Doug Lauver

    Perfect, thank you!

    0
    Comment actions Permalink
  • Avatar
    Andres Vargas

    I'm having trouble deleting a single image when multiple images have been uploaded into the widget. When I click the "x" it deletes all the images I have uploaded in the widget. Also when I delete an image how do I make it fade out like the example on this website?
    This is my code:

    $('.upload_field').unsigned_cloudinary_upload("XXXXXX",
      { cloud_name: 'XXXXXXX', tags: 'browser_uploads' },
      { multiple: true }
    ).bind('cloudinarydone', function(e, data) {
      $('.thumbnails').append($.cloudinary.image(data.result.public_id,
        { format: 'jpg', width: 150, height: 100,
          crop: 'thumb', gravity: 'face', effect: 'saturation:50' } )).append('<a href="#" class="cloudinary-delete">x</div><br>')
     
    $('.cloudinary-delete').click(function(){
    $.cloudinary.delete_by_token(data.result.delete_token);
    });

      }

    ).bind('cloudinaryprogress', function(e, data) {

      $('.progress .bar').css('width',
        Math.round((data.loaded * 100.0) / data.total) + '%');

    });

    0
    Comment actions Permalink
  • Avatar
    Richard Gieg

    Our Upload Widget feature can actually do all of that for you automatically. For example, in your HTML you can define an element such as:

    <div id="opener"></div>

    Then, in your JavaScript you can instantiate the upload widget like this:

    cloudinary.setCloudName('<YOUR CLOUD NAME>');
    cloudinary.applyUploadWidget(
        document.getElementById('opener'),
        { upload_preset: '<YOUR PRESET NAME>'},
        function(error, result) {
            console.log(error, result)
        }
    );

    When images are uploaded the upload widget will automatically add thumbnails to its containing element for you. Also, as long as the upload preset you use has the "return delete token" enabled (under "advanced options") then the thumbnails will automatically have delete buttons ("X"). The fade-out effect when a thumbnail is deleted is also implemented by the upload widget's code.

    See here for more info regarding the upload widget.

    1
    Comment actions Permalink
  • Avatar
    IVANA

    Thnx for this! I've been struggling the whole day with this and it turns out that is so simple 

    1
    Comment actions Permalink
  • Avatar
    Benjamin Rauch

    This works, but the hidden-field should also be deleted by click on the "x".

    Is this possible out of the box?

     

    Best regards,

    Benjamin.

     

    0
    Comment actions Permalink
  • Avatar
    Stephen Doyle

    Hi Benjamin,

    You should be able to remove the input in the same function - if you're having trouble doing so, may I please ask for a code sample showing where the problem is?

    Thanks,

    Stephen

    0
    Comment actions Permalink
  • Avatar
    Raja Muhammad Asher

    HI Richard,

    I have set the  return_delete_token to true but there is no delete option appearing with the thumbnails. Please remember, I am using React with the widget.

    0
    Comment actions Permalink

Please sign in to leave a comment.