Delete uploaded image using Dropify

I have inherited a legacy system that I need to maintain. This system has a fileupload using Dropify. When creating a new record, one can select an image file and it gets uploaded correctly. When editing the record, one can update a new image using this widget and it works fine too. Now what I want to do is, when editing the record, I want to be able to delete the existing uploaded image associated with the record. I am not sure how to do this.

When I mouseover the imageupload Dropify widget I get a “Remove” option shown, but clicking on it does not do anything. I checked the code and I found the following:

$(document).ready(function() 
{
    $('.dropify').dropify();
    // Used events
    var drEvent = $('.dropify-event').dropify();
    drEvent.on('dropify.beforeClear', function(event, element) {
        return confirm("Do you really want to delete "" + element.filename + "" ?");
    });
    drEvent.on('dropify.afterClear', function(event, element) {
        alert('File deleted');
    });
});

But clicking on the “Remove” on Dropify widget does not trigger neither the confirm nor the alert.

The dropify widget code itself is like follows:

<input 
type="file" 
name="image" 
id="fileChooser" 
class="dropify" 
data-default-file="" />

The PHP file upload script in the backend looks pretty standard:

if ($_FILES['image']['name']) 
{
    $productId = getProductId();
    $file_name = $productId . $_FILES['image']['name'];
    $file_size = $_FILES['image']['size'];
    $file_tmp = $_FILES['image']['tmp_name'];
    $file_type = $_FILES['image']['type'];
    $file_ext = strtolower(end(explode('.', $_FILES['image']['name'])));
    move_uploaded_file($file_tmp, "uploads/product/" . $file_name);
}

It would be great to get some pointers on how to delete images using dropify.

Answer

Looks like you are missing the dropify-event class on your input tag. After adding that it works fine. But even without the class, deletion still worked, except it didn’t have a fancy alert message. Maybe the snippet below, which works, can help you onto the right track.

$('.dropify').dropify();
// Used events
var drEvent = $('.dropify-event').dropify();
drEvent.on('dropify.beforeClear', function(event, element) {
  return confirm("Do you really want to delete "" + element.file.name + "" ?");
});
drEvent.on('dropify.afterClear', function(event, element) {
  alert('File deleted');
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js"></script>

<input type="file" name="image" id="fileChooser" class="dropify dropify-event" data-default-file="" />

Advertisement

Answer