Несколько Dropzone на одной странице не работают должным образом - PullRequest
Новая
       104

Несколько Dropzone на одной странице не работают должным образом

0 голосов
/ 05 октября 2019

Я использую dropzone для управления загрузкой файлов. Он хорошо работает в одной зоне сброса на одной странице, но когда речь идет о нескольких каплях на одной странице, будет работать только последняя зона сброса. Другая дропзона не будет работать. При предварительном просмотре загруженных изображений все файлы были предварительно просмотрены в последней выпадающей зоне. В этом случае один PDF-файл отображается в первой рабочей зоне, а затем - в последней.

Это мой снимок экрана: введите описание изображения здесь

HTML 

<form action="" method="POST" enctype="multipart/form-data" id="suratKuasa">
  <div class="form-group row">
    <label class="col-md-2 col-form-label" style="margin-right: 20px;">Jenis Surat Kuasa</label>
    <div class="form-check-inline">
      <input class="form-check-input" type="radio" name="sk" value="litigasi" checked><label class="form-check-label">Litigasi</label>
    </div>
    <div class="form-check-inline">
      <input class="form-check-input" type="radio" name="sk" value="non-litigasi"><label class="form-check-label">Non-Litigasi</label>
    </div>
  </div>
  <div class="form-group row sk" id="litigasi">
    <label class="col-md-2 col-form-label">File (SK Litigasi)</label>
    <div class="col-md-10 dropzone dzLitigasi"></div>
  </div>
  <div class="form-group row sk" id="non-litigasi">
    <label class="col-md-2 col-form-label">File (SK Non-Litigasi)</label>
    <div class="col-md-10 dropzone dzNonLitigasi"></div>
  </div>
  <?php if ($surat_kuasa){ ?>
    <a class="btn btn-info" href="<?= base_url('perkara/manage/' . $this->uri->segment(3) . '/somasi') ?>">Lanjut</a>
  <?php } else { ?>
    <input type="submit" class="btn btn-success" value="Simpan" id="submitSK">
  <?php } ?>
</form>

Dropzones 

<script type="text/javascript">
var dropzone = new Dropzone('.dzLitigasi' ,{
  url: '<?= base_url('perkara/suratKuasaSubmit'); ?>',
  maxFiles: 1,
  autoDiscover: false,
  addRemoveLinks: true,
  autoProcessQueue: false,
  acceptedFiles: 'application/pdf',
  addRemoveLinks: true,
  paramName: "files",
  init: function(){
    myDropzone = this;
    <?php if (isset($surat_kuasa->file)){ ?>
    $.ajax({
      url: '<?= base_url('berkas/getFile/' . $surat_kuasa->file); ?>',
      dataType: 'json',
      success: function(response){
        $.each(response, function(key, value) {
          var mockFile = { name: value.name, size: value.size };
          myDropzone.createThumbnailFromUrl(mockFile, '<?= base_url('assets/img/pdf_icon.png'); ?>');
          myDropzone.emit("addedfile", mockFile);
          myDropzone.emit("thumbnail", mockFile, '<?= base_url('assets/img/pdf_icon.png'); ?>');
          myDropzone.emit("complete", mockFile);
        });
      }
    });
  <?php } ?>
    $('#submitSK').click(function (e){
      e.preventDefault();
      myDropzone.processQueue();
    });
    this.on('sending', function(file, xhr, formData){
      var data = $('#suratKuasa').serializeArray();
      $.each(data, function(key, el){
        formData.append(el.name, el.value);
      });
    });
  }
});
var dropzone2 = new Dropzone('.dzNonLitigasi' ,{
  url: '<?= base_url('perkara/suratKuasaSubmit'); ?>',
  maxFiles: 1,
  autoDiscover: false,
  addRemoveLinks: true,
  autoProcessQueue: false,
  acceptedFiles: 'application/pdf',
  addRemoveLinks: true,
  paramName: "files",
  init: function(){
    myDropzone = this;
    <?php if (isset($surat_kuasa_1->file)){ ?>
    $.ajax({
      url: '<?= base_url('berkas/getFile/' . $surat_kuasa_1->file); ?>',
      dataType: 'json',
      success: function(response){
        $.each(response, function(key, value) {
          var mockFile = { name: value.name, size: value.size };
          myDropzone.createThumbnailFromUrl(mockFile, '<?= base_url('assets/img/pdf_icon.png'); ?>');
          myDropzone.emit("addedfile", mockFile);
          myDropzone.emit("thumbnail", mockFile, '<?= base_url('assets/img/pdf_icon.png'); ?>');
          myDropzone.emit("complete", mockFile);
        });
      }
    });
  <?php } ?>
    $('#submitSK').click(function (e){
      e.preventDefault();
      myDropzone.processQueue();
    });
    this.on('sending', function(file, xhr, formData){
      var data = $('#suratKuasa').serializeArray();
      $.each(data, function(key, el){
        formData.append(el.name, el.value);
      });
    });
  }
});
</script>
...