Удалить загруженное изображение с помощью Dropify - PullRequest
0 голосов
/ 09 июля 2020

Я унаследовал устаревшую систему, которую мне нужно поддерживать. В этой системе есть загрузка файлов с помощью Dropify. При создании новой записи можно выбрать файл изображения, и он будет правильно загружен. При редактировании записи можно обновить новое изображение с помощью этого виджета, и он тоже отлично работает. Теперь я хочу, чтобы при редактировании записи я мог удалить существующее загруженное изображение, связанное с записью. Я не знаю, как это сделать.

Когда я наводю указатель мыши на виджет Dropify загрузки изображения, я получаю показанную опцию «Удалить», но щелчок по ней ничего не делает. Я проверил код и обнаружил следующее:

$(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');
    });
});

Но нажатие на «Удалить» в виджете Dropify не вызывает ни подтверждения, ни предупреждения.

Сам код виджета dropify выглядит следующим образом:

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

Скрипт загрузки файла PHP в бэкэнде выглядит довольно стандартно:

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);
        } 

   

Есть ли у кого-нибудь опыт dropify? Было бы здорово получить несколько советов о том, как удалять изображения с помощью dropify.

1 Ответ

0 голосов
/ 09 июля 2020

Похоже, вам не хватает класса dropify-event в вашем теге ввода. После добавления этого все работает нормально. Но даже без класса удаление все еще работало, за исключением того, что не было необычного предупреждающего сообщения. Возможно, приведенный ниже фрагмент, который работает, поможет вам на правильном пути.

$('.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="" />
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...