Dropzone添加自定义元素和自定义侦听器

Question

如何向dropzone添加自定义元素和自定义侦听器。我添加了自定义链接到dropzone区域和jquery点击事件，但它似乎不起作用。当您在dropzone区域中单击该链接时，它会触发文件上载窗口。这很奇怪，因为当你点击删除链接时，它会分别触发删除事件并且不会触发dropzone区域。

这是它在网站上的样子：

缩略图是为什么削减，如果你能告诉我为什么这样，它也很好:)。但主要的问题是，如何使“设置主图像”链接工作（将此元素和事件添加到dropzone，通常不是，这是我的想法）。提前谢谢。

编辑：

Dropzone config。

dropz = new Dropzone('[data-form="announcement"]',
      paramName: 'image',
      acceptedFiles: '.jpg, .jpeg, .png',
      maxFilesize: 2,
      uploadMultiple: true
      autoProcessQueue: false
      parallelUploads: 100
      maxFiles: 10
      clickable: '.file-input'
      previewsContainer: '#preview-file'
      previewTemplate: document.querySelector('#previewTemplate').innerHTML
      init: ->
        myDropzone = this
        console.log(myDropzone.listeners)
        addedFile = false
        proccessedErrors = false
        existedFileCount = 0
        if page is 'PetsArea::AnnouncementsEdit'


          id = $('#announcement_id').val()
          $.ajax(
            method: 'GET'
            url: window.pets.globalVariables.urls.loadImages
            dataType: 'json'
            data:
              id: id
            success: (data) ->
              main_image_id = data['main_link']
              _.each(data['data'], (val) ->
                myDropzone.emit('addedfile', val)
                myDropzone.emit('thumbnail', val, val['url'])
                myDropzone.emit('success', val)
                myDropzone.emit('complete', val)
                myDropzone.files.push(val)
              )
          )

          new_clickable = $('[data-image="main"]')[0]
          new_listener = $.extend({}, myDropzone.listeners[myDropzone.listeners.length - 1])
          new_listener.element = new_clickable
          myDropzone.clickableElements.push(new_clickable)
          myDropzone.listeners.push(new_listener)
          myDropzone.disable()
          myDropzone.enable()

        this.on('addedfile', (file) =>
          addedFile = true
          proccessedErrors = false
          existedFileCount += 1 if file['url']
          if file['id'] is main_image_id
            preview = $('.dz-preview:last-child')
            preview.find('a').remove()
            preview.append(
              '<span data-main="image"><i class="fa fa-crosshairs"></i> Main image</span>'
            )
          else if file['id']
            preview = $('.dz-preview:last-child')
            preview.find('[data-image="main"]').attr('id', "#{file['id']}")
            preview.find('a.dz-remove').attr('id', "#{file['id']}")


          if this.files.length > 10
            this.removeFile(file)
        )

        this.element.querySelector('input[type="submit"]').addEventListener('click', (e) =>
          return unless addedFile and this.files.length > existedFileCount
          form.data('formValidation').validate()
          return unless form.data('formValidation').isValid()
          e.preventDefault()
          e.stopPropagation()
          myDropzone.processQueue()
        )

        this.on('successmultiple', (record, reply) ->
          window.location.href = reply['url']
        )

        this.on('error', (record, reply) ->
          unless proccessedErrors and !addedFile
            myDropzone.removeAllFiles()
            addedFile = false
            proccessedErrors = true
            window.location.reload();
        )
      removedfile: (file) ->
        if file['url']
          id = file['ad-id']
          photoId = file['photo-id']
          image_row = $(this).closest('[data-delete="block"]')
          $.ajax(
            method: 'POST'
            url: window.pets.globalVariables.urls.editPhotoDelete
            data:
              id: id
              photo_id: photoId
            success: (data) ->
              $(file['previewElement']).fadeOut('fast')
          )
        else
          $(file['previewElement']).fadeOut('fast')
    )

外部链接：

 $('[data-image="main"]').click ->
      e.preventDefault()
      e.stopPropagation()
      id = $(this).attr('id')
      prev_main_image = $("[data-image='main'] a##{main_image_id}").closest('.dz-preview')
      prev_main_image.find('[data-image="main"]').remove()
      prev_main_image.append('<a class="dz-remove" href="javascript:undefined" data-dz-remove><i class="fa fa-trash"></i> Remove file</a> +' +
          '<a data-image="main"><i class="fa fa-crosshairs main-image"></i> Set main image</a>')

      cur_main_image = $("[data-image='main'] a##{id}").closest('.dz-preview')
      cur_main_image.find('a').remove()
      cur_main_image.append('<span><i class="fa fa-crosshairs"></i> Main image</span>')