Как установить один вход Dropify для нескольких кнопок?

Question

У меня есть список клиентов и таблица и кнопка редактирования в каждой строке. Я использую модальную форму для редактирования информации о клиенте, и у меня есть поле ввода dropify, чтобы изменить изображение клиента. Когда кнопка редактирования нажата, если она существует, я устанавливаю изображение по умолчанию для dropify, и модальные кнопки закрытия нажимают значения формы, и dropify восстанавливается. До этого момента все в порядке. Когда я нажимаю другую кнопку редактирования в списке, она не устанавливает значение по умолчанию для dropify. Вы можете проверить мои коды ниже. Кто-нибудь может быть полезным, я буду рад. Спасибо.

<div class="modal fade modal-primary" id="editCustomerModal" aria-hidden="true" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" id="closeEditModal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title">Edit Customer</h4>
      </div>
        <div class="modal-body">
          <form class="form-horizontal" id="editCustomer" enctype="multipart/form-data" autocomplete="off">
              <div class="form-group row">
                  <label class="col-xs-12 col-sm-3 form-control-label">Logo:</label>
                  <div class="col-sm-9 col-xs-12">
                      <input type="file" name="image" class="editDropify" />
                  </div>
              </div>
          </form>
        </div>
        <div class="modal-footer p-0">
            <div class="row no-space">
                <div class="col-xs-12 col-sm-6">
                    <button type="button" class="btn btn-danger btn-block h-50 font-size-18" style="border-radius: 0;" data-dismiss="modal"><i class="icon fa-close" aria-hidden="true"></i> İptal </button>
                </div>
                <div class="col-xs-12 col-sm-6">
                    <button type="submit" form="editCustomer" class="btn btn-success btn-block h-50 font-size-18" id="submitEditCustomer" style="border-radius: 0;"><i class="icon fa-save" aria-hidden="true"></i> Kaydet </button>
                </div>
            </div>
        </div>
    </div>
  </div>
</div>

<script>
        $(document).on('click', '.editButton', function() {

                compLogo = $(this).closest("tr").children("td:eq(3)").children("img").attr("src"),

                editCompId = $(this).data("edit-id");

            $("#editCustomer input[name='which_content']").val(editCompId);

            $("#editCustomerModal").modal({backdrop: "static"});

            $(".editDropify").dropify({defaultFile: compLogo});

        });



        $('#editCustomer')
            .formValidation({
                framework: "bootstrap4",
                button: {
                  selector: '#submitEditCustomer',
                  disabled: 'disabled'
                },
                icon: null,
                fields: {
                   // valiations
                },
                err: {
                  clazz: 'text-help'
                },
                row: {
                  invalid: 'has-danger'
                }
            })

            .on('success.form.fv', function(e) {
                e.preventDefault();

                var formDatas = new FormData($("#editCustomer")[0]);

                $.ajax({
                    type: "POST",
                    url: "editSomething.php",
                    data: formDatas,
                    cache: false,
                    contentType: false,
                    processData: false
                })

            .success(function(editCompId) {
                // success operations and modal close
                $("#editCustomerModal").modal('hide');

                });
            });

        $(document).on('click', '.close', function () {

            // with modal close button clearing dropify element

            var drEvent = $('.editDropify').dropify();
                drEvent = drEvent.data('dropify');
                drEvent.resetPreview(); 
                drEvent.clearElement(); 

            $("#editCustomerModal").modal('hide');
        });
</script>

Answer 1

Вот решение.

var drEvent = $('#yourInputFileId').dropify(
{
    efaultFile: imagenUrl
});
drEvent = drEvent.data('dropify');
drEvent.resetPreview();
drEvent.clearElement();
drEvent.settings.defaultFile = imagenUrl;
drEvent.destroy();
drEvent.init();