CakePHP3で同ページでエレメントの複数回呼び出し（Dropzone.js使用）

Question

同一ページで同じエレメントを複数回読んだ際にプラグインが上手く動かずに困っております。

Dropzone.JSというプラグインを使用しております。

<?= $this->Html->script('dropzone.js') ?>
<?= $this->element('dropzone', ['type' => 'value1']); ?>
<?= $this->element('dropzone', ['type' => 'value2']); ?>

エレメント（dropzone.ctp）

<div class="file" id="file_<?= $type; ?>">
    ファイルをドラッグandドロップ
</div>
<div id="preview_area_<?= $type; ?>" class="dropzone_pre"></div>
<script>
    var url = '<?= BASE_URL; ?>';
    var type = '<?= $type; ?>';

    $(function () {
        Dropzone.autoDiscover = false;

        var myDropzone_<?= $type; ?> = new Dropzone("div#file_<?= $type; ?>", {
            previewsContainer: '#preview_area_<?= $type; ?>',
            url: url + "/upload/"+type,
            parallelUploads: 1,
            maxFiles: 5,
            maxFilesize: 5,
            init: function () {
                // 既存のファイル名取得
                this.on("addedfile", function (file) {
                    // ファイルの追加時
                });
                this.on("removedfile", function (file) {
                    // remove file
                });
            },
            success: function (file, res) {
                // 保存処理
            }
        });

    })
</script>

出力されているファイルでは、value1、value2でプラグインがインスタンス化されているのですが、挙動は全てvalue2のものになっております。
・既存のファイル名取得
・保存処理
全てがvalue2のもので実行されてしまっております。

エラーも特に出ず、
原因がCakephpなのかdropzone.jsなのかすら分かっておりません。

お分かりの方教えていただけると助かります。

Answer 1

    var url = '<?= BASE_URL; ?>'; // 
    var type = '<?= $type; ?>'; // この二行を↓「略」の先頭に入れる

    $(function () { /* 略 */ });

Comments

[kenkbou]

ありがとうございます！イケました。