dropzone替换添加的文件

Question

如何通过单击“替换”按钮替换在dropzone中添加的文件。

Codepen

这是我的Codepen，我使用可排序的jquery处理dropzone。我想向添加到dropzone的每个文件中添加一个名为replace的按钮，以将其替换为另一个文件。

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone(".upload", {
url: "/file/post",
addRemoveLinks: true,                      
autoProcessQueue: false,
maxFiles: 5,
parallelUploads: 5,
previewTemplate : $('.preview').html(),
init: function() {
  this.on('completemultiple', function(file, json) {
       $('.upload').sortable('enable');

       $(".dz-preview").each( function() {
            var indexes = $(this).index();
            $(this).attr('id', "index-" + indexes);
            $(this).find('.dz-index').text(indexes);

        })
      });
    this.on("addedfile", function (file) {
        if (myDropzone.getQueuedFiles().length > 0) {
             var length = myDropzone.getQueuedFiles().length;
             length2 = length+1;
             console.log('q:' + length2);
        }
        $(".dz-preview").each( function() {
            var indexes = $(this).index();
            $(this).attr('id', "index-" + indexes);
            $(this).find('.dz-index').text(indexes);
        });

        $('.dz-preview').data('file', file);



    });
    this.on("removedfile", function (file) {
        console.log('test');
        $(".dz-preview").each( function() {
            var indexes = $(this).index();
            $(this).attr('id', "index-" + indexes);
            $(this).find('.dz-index').text(indexes);
        })
        if (myDropzone.getQueuedFiles().length > 0) {
             console.log(myDropzone.getQueuedFiles().length);
        }


    });
    this.on('drop', function(file) {
        console.log('File',file)
      }); 
},
success: function (file, response) {
    console.log(response);
    file.previewElement.id = response.id;
  }
});



 $('#uploadFiles').on('click', function () {
    myDropzone.processQueue();
});


$(document).ready(function(){
 $('.upload').sortable({
    stop: function () {
        $(".dz-preview").each( function() {
                var indexes = $(this).index();
                $(this).attr('id', "index-" + indexes);
                $(this).find('.dz-index').text(indexes);
            });

            //var queueArray = myDropzone.getQueuedFiles();
            // Reorder files within the array
            //myDropzone.removeAllFiles();
            // Loop and add your files again
            //myDropzone.addFile(file);


    }
 });

});


});

我想要的第二个功能是单击拖放区中的预览添加文件时显示全尺寸图像。

1-替换已添加文件上的按钮

2-点击添加的文件显示全尺寸图片

codepen