Удаление переименованного файла на сервере с помощью Dropzone.js

Question

Я пытаюсь реализовать Dropzone JS, чтобы помочь с загрузкой файлов на сервер. Я использую общую реализацию Dropzone на стороне клиента с моим HTML вида:

<form id='portfolioupload' action='PortfolioUpload.php' class='dropzone'> 
    <div class='fallback'> 
     <input name='file' type='file' /> 
    </div> 
    </form> 

В сервере, я сделать некоторые проверки и, в конце концов, я переименовать файл и переместить его в это итоговое место:

$newname = substr(GetGUID(false), -7) . '.' . $ext; 
move_uploaded_file($_FILES['file']['tmp_name'], PortfolioPath() . $newname) 

Я прохожу эту информацию, используя JSON, как это было предложено в Dropzone.js- How to delete files from server?:

header_status(200); // output header, error 200 
echo json_encode(array("Filename" => $newname)); 

пример кода там выглядит, как он добавляет его в массив, который может быть передан на сервер для удаления. Так близко, но не совсем то, что я ищу.

Я потом спотыкаюсь на вопрос, how to upload and delete files from dropzone.js, и вижу, что я могу слушать удаленный файл событие. Поэтому я реализую код там примерно так:

Dropzone.options.portfolioupload = { 
    acceptedFiles: '.png, .jpg, .gif', 
    addRemoveLinks: true, 
    maxFiles: 25, 
    maxFilesize: 500000, 
    removedfile: function(file) { 
    alert('Deleting ' + file.name); 
    var name = file; 
    $.ajax({ 
     type: 'POST', 
     url: 'app/assets/PortfolioUpload.php', 
     data: "f=delete&fn="+name, 
     dataType: 'html' 
    }); 

    var _ref; 
    return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0; 
    } 
}; 

Запрос отправляется на сервер успешно, за исключением, что имя файла является то, что переименованного файла оригинального, а не сервера.

После чистки сети сегодня я чувствую, что не могу понять, как связать эти два предмета вместе. Например, если я загрузил foo.jpg и переименовал его на сервере на dk03p7b.jpg, как сообщить Dropzone, что foo.jpg = dk03p7b.jpg так, что когда пользователь нажимает «Удалить файл», он также удаляется на сервере?

Answer 1

Я решил это сам, во-первых, принимая JSON от ответа успеха и сохранения его на элемент file.previewElement.id так:

success: function(file, response) { 
    obj = JSON.parse(response); 
    file.previewElement.id = obj.filename; 
    } 

Затем я использую это значение при выполнении удалить АЯКС вызов в removedfile событие в:

removedfile: function(file) { 
    var name = file.previewElement.id; 
    $.ajax({ 
     type: 'POST', 
     url: 'deletefile.php', 
     data: "fn="+name, 
     dataType: 'html' 
    }); 

    var _ref; 
    return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0; 
    }, 

Answer 2

Это также работает для меня

// "myAwesomeDropzone" is the camelized version of the HTML element's ID 
var myDropzone = new Dropzone("#myAwesomeDropzone", { 
    success: function(file, response) { 
     file.previewElement.id = response.id; 
    } 

}); 
myDropzone.on('removedfile', function(file) { 
    var id = file.previewElement.id; 
    $.ajax({ 
     type: 'POST', 
     url: '<?php echo base_url('seller/deleteImagegalleryById'); ?>', 
     data: {id: id, '<?php echo $this->security->get_csrf_token_name(); ?>': '<?php echo $this->security->get_csrf_hash(); ?>'}, 
     dataType: 'html' 
    }); 
    var _ref; 
    return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0; 
});