Blueimp file upload : my DELETE link doesn't work

Question

Here is my form (basic upload) :

<span class="btn btn-success fileinput-button">
    <span>Select files...</span>
    <input id="fileupload" type="file" name="files[]" multiple>
</span>
<br>
<div id="files" class="files"></div>

Here is my script :

$(function () {
    $('#fileupload').fileupload({
        url: 'server/php/',
        dataType: 'json',
        add: function (e, data) {
            data.context = $('<p/>').text('Uploading...').appendTo('#files');
            data.submit();
        },
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').html('<a href="#" class="text-danger delete" data-type="' + file.deleteType + '" data-url="' + file.deleteUrl + '" title="Delete">Delete</a>').appendTo('#files');
            });
        }
    });
});

My upload is OK but when I click on the DELETE link, nothing happens. It seems like this link has no effect. Maybe I missed to include something ?

Any idea ?

what errors do you see in your console ?

Dhiraj
– Dhiraj

2015-03-13 15:49:39 +00:00
Commented Mar 13, 2015 at 15:49 — Dhiraj
– Dhiraj, Commented Mar 13, 2015 at 15:49

robertlyall · Accepted Answer · 2015-03-13 15:56:31Z

5

Unless I'm missing something, you haven’t set up an event listener on the link.

$('#files').on('click', 'a', function (e) {
  e.preventDefault();

  var $link = $(this);

  var req = $.ajax({
    dataType: 'json',
    url: $link.data('url'),
    type: 'DELETE'
  });

  req.success(function () {
    $link.closet('p').remove();
  });
});

answered Mar 13, 2015 at 15:56

robertlyall

2161 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Xavier C. Over a year ago

My mistake... You rock !

Mohamed Salah Over a year ago

Could you please tell me how to remove delete link from response GUI

eselskas · Accepted Answer · 2019-06-26 19:08:51Z

2

you might have resolved your problem but just adding my answer for any new solution seeker.

you don't need to make a delete request manually as done by @rglyall, just setup the html structure properly and Jquery-file-upload will take care of it itself.

change

<a href="#" class="text-danger delete" data-type="' + file.deleteType + '" data-url="' + file.deleteUrl + '" title="Delete">Delete</a>

to

<button class="text-danger delete" data-type="' + file.deleteType + '" data-url="' + file.deleteUrl + '" title="Delete">Delete</button>

you need to make sure following things exist to library automatically handle this i.e

Html element has to be 'button'.
This button has to have a class of 'delete'.
This button has to have 'data-type'.
This button has to have 'data-url'.

edited Jun 26, 2019 at 19:08

eselskas

8278 silver badges19 bronze badges

answered Apr 13, 2018 at 17:05

omair azam

5809 silver badges16 bronze badges

Collectives™ on Stack Overflow

Blueimp file upload : my DELETE link doesn't work

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related