Upload widget: how to get delete link to appear next to thumbnails?
In the documentation page for the upload widget, when I upload multiple images using the sample button provided, a link is appended to each thumbnail that allows you to delete it: <a class="cloudinary-delete" href="#">×</a>
How do I get that link to appear? In my own tests I can get the thumbnails, but not the delete link.
-
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 -
Perfect, thank you!
0 -
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 -
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 -
Thnx for this! I've been struggling the whole day with this and it turns out that is so simple
1 -
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 -
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 -
HI Richard,
I have set the
return_delete_tokentotruebut there is no delete option appearing with the thumbnails. Please remember, I am using React with the widget.0 -
Hey there,
Sorry about the late response but our forum system has been having some recent issues and we were not notified about your last message. I wanted to make sure you were able to progress with your project. If you are still having issues, please share by opening a support ticket at https://support.cloudinary.com/ and provide your cloud name and some sample code/settings that you are currently using.0
Post is closed for comments.
Comments
9 comments