Laravel 5.2 и Dropzone.js - Удалить (удалить) загруженные изображения

Взгляните на этот ответ, чтобы помочь вам понять события dropzone:

https://stackoverflow.com/a/19454507/4734404

Затем вы должны добавить действие в свой контроллер для вашего запроса на удаление, чтобы удалить изображение из БД и диска:

public function dropzoneRemove(Request $request)
{
    if($request->ajax()) { 
        $photo = Photo::find($request->photoId); //Get image by id or desired parameters

        if(File::exists($destinationPath.$photo->file_name)) //Check if file exists
            File::delete($destinationPath.$photo->file_name) //Delete file from storage
            
        $photo->delete()   //Delete file record from DB

        return response('Photo deleted', 200); //return success
    }
}

Я бы порекомендовал вам взглянуть на фасад Laravel Storage, чтобы ваши файлы были хорошо организованы в вашей файловой системе.

https://laravel.com/docs/5.2/filesystem

ИЗМЕНИТЬ:

Как добавить кнопку для удаления предварительного просмотра каждого файла?

Начиная с версии Dropzone 3.5.0, есть опция, которая сделает все это за вас: addRemoveLinks. Это добавит элемент «Удалить файл» к предварительному просмотру файла, который удалит файл, и он изменится на «Отменить загрузку», если файл в данный момент загружается (это вызовет диалоговое окно подтверждения).

Вы можете изменить эти предложения с помощью параметров dictRemoveFile, dictCancelUpload и dictCancelUploadConfirmation.

Если вы все еще хотите создать кнопку самостоятельно, вы можете сделать это следующим образом:

<form action="/target-url" id="my-dropzone" class="dropzone"></form>

<script>
    // myDropzone is the configuration for the element that has an id attribute
    // with the value my-dropzone (or myDropzone)
    Dropzone.options.myDropzone = {
        init: function() {
            this.on("addedfile", function(file) {

                // Create the remove button
                var removeButton = Dropzone.createElement("<button>Remove file</button>");


                // Capture the Dropzone instance as closure.
                var _this = this;

                // Listen to the click event
                removeButton.addEventListener("click", function(e) {
                    // Make sure the button click doesn't submit the form:
                    e.preventDefault();
                    e.stopPropagation();

                    // Remove the file preview.
                    _this.removeFile(file);
                    // If you want to the delete the file on the server as well,
                    // you can do the AJAX request here.
                });

                // Add the button to the file preview element.
                file.previewElement.appendChild(removeButton);
            });
        }
    };
</script>

Из часто задаваемых вопросов: https://github.com/enyo/dropzone/wiki/FAQ#how-to-add-a-button-to-remove-each-file-preview

Подробнее о настройке свойств dropzone здесь: http://www.dropzonejs.com/#layout.

ИЗМЕНИТЬ 2

Проблема здесь:

Dropzone найдет все элементы формы с классом dropzone, автоматически прикрепится к нему и загрузит сброшенные в него файлы на указанный атрибут действия. http://www.dropzonejs.com/#usage

В качестве альтернативы вы можете создавать зоны сброса программно (даже на элементах, не являющихся элементами формы), создав экземпляр класса Dropzone http://www.dropzonejs.com/#create-dropzones-programmatically

Dropzone.autoDiscover = false; // to disable the auto discover behaviour of Dropzone (sami ga definisemo ispod)

var myDropzone = new Dropzone("div#dropzoneFileUpload", {

Я полагаю, что у вас есть два экземпляра Dropzone, потому что вы создаете еще один объект Dropzone. Вы должны придерживаться быстрой настройки и редактировать параметры напрямую, а также удалить autoDiscover = false, а не делать это программно.

если идентификатор вашего элемента dropzone — «my-awesome-dropzone»:

<form action="/file-upload"class="dropzone" id="my-awesome-dropzone"></form>

Dropzone автоматически создаст свойство с верблюжьим идентификатором «myAwesomeDropzone» и прикрепит его к текущему объекту.

Итак, вы устанавливаете параметры Dropzone, выполняя:

//myAwesomeDropzone = camelized version of ID = my-awesome-dropzone
Dropzone.options.myAwesomeDropzone = { 
    addRemoveLinks: true
}

Я сделал этот плункер с настройкой minimun для вас, просто добавьте конфигурацию вашего запроса, как вы делали раньше, и он должен работать, я установил для addRemoveLinks значение true, чтобы вы могли видеть, что они работают:

https://plnkr.co/edit/9850jCOpTwjSSxI1wS1K?p=info