Laravel 5.2＆Dropzone.js - 删除（删除）上传的图片

Question

在routes.php文件，我有以下途径：

Route::post('dropzone', ['as' => 'dropzone.upload', 'uses' => 'AdminPhotoController@dropzoneUpload']); 
Route::post('dropzone/delete', ['as' => 'dropzone.delete', 'uses' => 'AdminPhotoController@dropzoneDelete']); 

在AdminPhotoController.php我按以下方式做：

public function dropzoneUpload(Request $request) 
{ 
    if($request->ajax()) { // hmm, do I really need this? 
     if ($request->hasFile('file') && $request->file('file')->isValid()) { 
      $image_file = $request->file('file'); 
      $image_name = time() . '_' . $image_file->getClientOriginalName(); 
      $destinationPath = 'images/photos'; 

      if ($image_file->move($destinationPath, $image_name)) { 
       $photo = new Photo(['file_name' => $image_name, 'title' => 'No title', 'description' => 'No description']); 
       \Auth::user()->photos()->save($photo); 

       return \Response::json('success', 200); 
      } else { 
       return \Response::json('error', 400); 
      } 
     } 
    } 
} 

最后，这里是我的HTML & JS：

<div class="dropzone" id="dropzoneFileUpload"> 
</div> 

<script type="text/javascript"> 

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

    var myDropzone = new Dropzone("div#dropzoneFileUpload", { 
     url: "{{ route('dropzone.upload') }}", 
     headers: { 
      'X-CSRF-TOKEN': '{!! csrf_token() !!}' 
     } 
    }); 

</script> 

它工作，上传文件的作品。但我希望删除链接删除上传的图像。我正在阅读有关http://www.dropzonejs.com/的官方文档，但我仍然不知道如何去做。我看到有：

• removedfile事件 - 每当一个文件从列表中移除时调用。如果你愿意，你可以收听这个文件并从服务器上删除文件;
• 和.removeFile（file）方法 - 如果要从dropzone中删除添加的文件，可以调用.removeFile（file）。此方法还会触发removedfile事件。

于是我开始喜欢这一点，但我不知道该怎么做，如何删除这些图片：

Dropzone.options.dropzoneFileUpload = { // div has id=dropzoneFileUpload? 
     addRemoveLinks: true, // but still link to delete is not displayed? 
     dictRemoveFile: 'Remove' 
    }; 

    myDropzone.on("complete", function(file) { 
     myDropzone.removeFile(file); // What should I do here? 
    }); 

。

---

编辑：

如果我删除此代码：现在

Dropzone.autoDiscover = false; 

    var myDropzone = new Dropzone("#my-dropzone", { 
     url: "{{ route('dropzone.upload') }}", 
     headers: { 
      'X-CSRF-TOKEN': '{!! csrf_token() !!}' 
     } 
    }); 

的解决方案，即@Manuel阿扎尔给将工作，删除的链接显示（每个上传的图片）。所以，这个代码有一些问题，缺少一些东西。

Answer 1

看看这个答案，以帮助您了解悬浮窗事件：

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的存储外观，以保持文件系统中的文件组织良好。

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

这里更多的信息有关自定义悬浮窗属性：http://www.dropzonejs.com/#layout

编辑2

问题是在这里：

Dropzone将查找带有dropzone类的所有表单元素，自动将其自身附加到它，并将放入其中的文件上载到指定的操作属性中。 http://www.dropzonejs.com/#usage

或者你可以（甚至在非表单元素）通过实例化悬浮窗类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", { 

创建dropzones programmaticaly我相信你有悬浮窗的两个实例，因为你正在创造另一个悬浮窗对象。您应该坚持快速配置并直接编辑选项，并删除autoDiscover = false，而不是以编程方式进行。

如果你的悬浮窗元素ID是“我 - 真棒 - 悬浮窗”：

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

悬浮窗会自动将创建一个骆驼化ID名称“myAwesomeDropzone”属性并将其附加到当前对象。

所以你做设定的悬浮窗选项：

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

我做了这个plunker与minimun设置你的，只需添加您的要求配置像之前一样，它应该工作，我设置了addRemoveLinks为true，所以你可以看到，他们的工作：

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