Jquery記法でjavascirptで書かれた内容を書き換え動かしたい

Dropzonejs(http://www.dropzonejs.com)を複数箇所設置して動かしていますが、この時に
アップロード済みの画像をダブルクリックしたら画像を削除するシーケンスを入れたいです。

動作デモ：https://2nd-train.net/users/submission2ndnewnotmem

(同時にIDがinsertid1になっている部分の書き換えも実施)ですが、
どのように記述すれば良いでしょうか。
jqueryの記法で以下のように記述しています。
javascriptの記法であれば、以下に書いた内容で動きます。
（この記法だとdropzoneを１箇所しか置けないのでそのまま使えない）

lang
1                myAwesomeDropzone.on(\"addedfile\", function(file) {
2  file.previewElement.addEventListener(\"dblclick\", function() {
3
4     myAwesomeDropzone.removeFile(file);   
5      document.getElementById('insertid1').value=null; 
6  });
7});

以下、現状の実装です。

lang
1var myAwesomeDropzone = function() {
2    Dropzone.autoDiscover = false;
3$('.my-awesome-dropzone1').dropzone({
4        paramName : "file",         // input fileの名前//
5        parallelUploads:1,            // 1度に何ファイルずつアップロードするか
6        acceptedFiles:'image/*',   // 画像だけアップロードしたい場合
7        maxFiles:1,                      // 1度にアップロード出来るファイルの数
8        dictInvalidFileType: "画像ファイル以外です。",
9        dictMaxFilesExceeded: "一度にアップロード出来るのは1ファイルのみです。",
10        url:"/users/uploadapi2",
11        accept: function(file, done) {
12		return done();
13    },
14    success:function(file,xhr,formData){
15document.getElementById('insertid1').value=xhr.res.insertid;  
16            },
17,init: function() {
18            this.on("addedfile", function(file) { 
19            
20            file.previewElement.addEventListener(\"dblclick\", function() {
21            console.log("削除シーケンス実行");
22//アップロード画像をダブルクリックするとこのconsole.logまでは表示されるが、画像の削除ができない
23//this.removeFile(file); でもダメで、this.removeFile is not a functionのエラーになる。今の表記では$(...).removeFile is not a functionエラーが出る。
24            $('.my-awesome-dropzone1').removeFile(file);
25
26
27
28            });
29            
30            });
31
32    } 
33    });
34$('.my-awesome-dropzone2').dropzone({
35//my-awesome-dropzone1と同じ処理をやっているため省略
36
37 });
38}

lang
1<div class="my-awesome-dropzone1 dropzone drag-and-drop-area drag-and-drop-area-out">
2     <div class="dz-default dz-message"><span>まずは画像をドロップしてください。<br />1枚のみドロップ出来ます。<br />別の写真をアップロードし直したい時はドロップエリアに表示されている画像をダブルクリックすることで再度ドロップ出来ます。</span></div>
3</div>
4<div class="my-awesome-dropzone2 dropzone drag-and-drop-area drag-and-drop-area-out">
5     <div class="dz-default dz-message"><span>まずは画像をドロップしてください。<br />1枚のみドロップ出来ます。<br />別の写真をアップロードし直したい時はドロップエリアに表示されている画像をダブルクリックすることで再度ドロップ出来ます。</span></div>
6</div>

kei344

2017/06/16 09:07

https://teratail.com/questions/80551 これで解決したのでは？

Nanohana

2017/06/16 09:56

この時は、画像アップロードに失敗した直後なので、this.removeFile(file);を書くだけで削除できましたが、今の状況だとthisが存在せず削除できません。

行動規範の内容に同意します

回答2件

もっとスマートに書けるかもしれませんが。

JavaScript
1$(document).on('click', '.dz-preview.dz-file-preview', function(event) {
2	let dropzone = Dropzone.forElement(this.parentElement);
3	dropzone.removeFile(dropzone.files.find(a => a.previewElement === this));
4});