Переинициализация/Сброс Dropzone после отправки формы

Question

Я использую dropzone.js, чтобы загрузить изображение на рубин на рельсах .Здесь мой HTML код

<div class="row"> 
    <div class="col-md-12" id="drop-zone-container"> 
    <%= form_tag '/settlement_proofs', method: :post, class: 'dropzone form', id: 'media-dropzone' do %> 
     <div class="fallback"> 
      <%= file_field_tag 'attachment', multiple: true%> 
     </div> 
    <% end %> 
    </div> 
</div> 

и я инициализируется Dropzone в

$("#media-dropzone").dropzone({ 
    acceptedFiles: pg.constants.ACCEPTED_FORMAT, 
    maxFilesize: pg.constants.ATTACHMENT_MAX_FILE_SIZE, //In MB 
    maxFiles: pg.constants.ATTACHMENT_MAX_SIZE, 
    addRemoveLinks: true, 
    removedfile: function (file) { 
     if (file.xhr.responseText.length > 0) { 
      var fileId = JSON.parse(file.xhr.responseText).id; 
      $.ajax({ 
       url: pg.constants.url.SETTLEMENT_BASE_URL + fileId, 
       method: 'DELETE', 
       dataType: "json", 
       success: function (result) { 
        $('#uploaded_attachment').val($("#uploaded_attachment").val().replace(result.id + ',', "")); 
        $('#settlement_proof_status span').fadeOut(0); 
        var _ref; 
        return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0; 

       }, 
       error: function() { 
        $('#settlement_proof_status').text(I18n.t('attachment_deletion_error')).fadeIn(); 
       } 

      }); 
     } 

    }, 
    init: function() { 

     this.on("success", function (file, message) { 
      debugger; 
      appendContent(message.attachment.url, message.id); 
     }); 

     this.on("error", function (file, message) { 
      $('#settlement_proof_status span').text(message).fadeIn(); 
      var _ref; 
      return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0; 
     }); 
     $('#settlement_invoice_submit_btn').click(function() { 
      $("#new_settlement_invoice").submit(); 
     }); 
     $('#uploaded_attachment').change(function() { 
      if (this.value.length == 0) { 
       this.removeAllFiles(); 
      } 
     }); 
    } 
}); 

После Я передаю форму через AJAX, мне нужно, чтобы поле dropzone сбросилось с изображением по умолчанию.

Answer 1

Наконец, я решил этот вопрос сам. Сначала я удаляю форму из своего родительского элемента. Он удалил существующий экземпляр dropzone. Затем я создаю форму с помощью jQuery и снова инициализирую dropzone. Вот мой полный код

// To reset dropzone before popup load 
    var resetDropzone = function() { 

     $('#drop-zone-container').empty(); 

     var $form = makeElement('form', { 
      action: window.pg.constants.url.SETTLEMENT_BASE_URL, 
      method: 'post', 
      id: 'settlement-proof-form', 
      class: 'dropzone' 
     }); 

     $('#drop-zone-container').append($form); 

     var settlmentProofDropZone; 
     $("#settlement-proof-form").dropzone({ 
      acceptedFiles: pg.constants.ACCEPTED_FORMAT, 
      maxFilesize: pg.constants.ATTACHMENT_MAX_FILE_SIZE, //In MB 
      maxFiles: pg.constants.ATTACHMENT_MAX_SIZE, 
      addRemoveLinks: true, 
      removedfile: function (file) { 
       if (file.xhr.responseText.length > 0) { 
        var fileId = JSON.parse(file.xhr.responseText).id; 
        $.ajax({ 
         url: pg.constants.url.SETTLEMENT_BASE_URL + fileId, 
         method: 'DELETE', 
         dataType: "json", 
         success: function (result) { 
          $('#uploaded_attachment').val($("#uploaded_attachment").val().replace(result.id + ',', "")); 
          $('#settlement_proof_status span').fadeOut(0); 
          var _ref; 
          return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0; 

         }, 
         error: function() { 
          $('#settlement_proof_status').text(I18n.t('attachment_deletion_error')).fadeIn(); 
         } 

        }); 
       } 

      }, 
      init: function() { 
       settlmentProofDropZone = this; 

       this.on("success", function (file, message) { 
        appendContent(message.attachment.url, message.id); 
       }); 
      } 
     }); 

    }; 

    function makeElement(element, options) { 
     var $formField = document.createElement(element); 
     $.each(options, function (key, value) { 
      if (key === 'innerHTML') { 
       $formField.innerHTML = value; 
      } 
      else { 
       $formField.setAttribute(key, value); 
      } 
     }); 
     return $formField; 
    } 
}); 

Answer 2

this.on("complete", function(file) { 
    this.removeAllFiles(true); 
}) 

напишите вышеуказанный код в INIT функция.

это удаляет все файлы в dropzone и переводит dropzone в исходное состояние.

http://www.dropzonejs.com/#event-reset

Answer 3

Попробуйте это:

//DropZone Initiation Section 
init: function() { 
    this.on('success', function(file, json) { 
    }); 

    this.on('addedfile', function(file) { 
    }); 

    this.on('drop', function(file) { 
    }); 

    this.on('removedfile', function(file) { 
    }); 

    this.on('complete', function(file) { 
    }); 

    this.on('error', function(file) { 
    }); 

    this.on('resetFiles', function() { 
     if(this.files.length != 0){ 
      for(i=0; i<this.files.length; i++){ 
       this.files[i].previewElement.remove(); 
      } 
      this.files.length = 0; 
     } 
    }); 
} 

function JS_ClearDropZone() { 
    //DropZone Object Get 
    var objDZ = Dropzone.forElement("div#objDropzone"); 
    //"resetFiles" Event Call 
    objDZ.emit("resetFiles"); 
} 

Answer 4

Каждый ответ здесь невероятно сложным. У меня есть dropzone в модальном с некоторым ajax, чтобы нарисовать загруженный/полный файл на странице. Если пользователь добавляет изображение ANOTHER в галерею, я хотел бы сбросить dropzone в этом модальном состоянии без обновления страницы. Ответ? См. Мое решение здесь https://stackoverflow.com/a/45247184/179571