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