小一時間ほど調べた。
時間が勿体ないと思ったので書いておく。
index.blade.php
<script type="text/javascript">
$(function(){
// 初期設定とか
Dropzone.autoDiscover = false;
Dropzone.options.myAwesomeDropzone = {
paramName : "file",
paralleUploads : 1,
acceptedFiles : 'image/*',
maxFiles: 6,
maxFilesize: 3,
dictFileTooBig: "ファイルが大きすぎます。(@{{filesize}}MB). 最大サイズ: @{{maxFilesize}}MB.",
dictInvalidFileType: "画像ファイルのみアップロードが可能です。",
dictMaxFilesExceeded: "ファイルは6ファイルまで追加が可能です。",
dictDefaultMessage: "ここへファイルをドラッグ&ドロップするとアップロードされます。<br>最大6ファイルまでアップ可能です。<br><br>(もしくはここをクリックするとファイル選択ウインドウが表示されますのでそこで選択してもアップ可能です)"
};
// ここからがタイトルに書いた内容になる。
var myDropzone = new Dropzone('div#my-dropzone', {
url : "http://hogehoge.com/upload.php",
addRemoveLinks: true,
dictRemoveFile: "削除",
}).on("success", function(file, serverResponse){
// ファイルを受け取るphp側では、アップロードされたファイルの保存名を返すようにしておく
// するとserverResponseにファイルの名前が返ってくる。
console.log(serverResponse); // デバッグ用
file.previewElement.querySelector("img").alt = serverResponse; // imgタグのalt属性にサーバから受け取ったファイル名を持たせておく
}).on("removedfile", function(file){
// 削除ボタンが押された時
console.log( file.previewElement.querySelector("img").alt ); // 削除対象のファイル名が取得出来る
$.ajax(...);//あとは非同期でファイル名を指定して削除するサーバサイドプログラムへリクエスト
});
});
</script>