Droparea не работает, Jquery -> перетаскивает изображение и не загружает его - PullRequest
Новая
       79

Droparea не работает, Jquery -> перетаскивает изображение и не загружает его

0 голосов
/ 28 октября 2018

У меня небольшая проблема - я могу добавить файл по клику.не работает только dropzone.Если я перетащу файл в браузер, будет отображаться и не загружаться. 

    $('#trigger-attachment').click(function(event) {
      if ($('#attachment-1').val() == '') {
        console.log('trigger 1')
        $('#attachment-1').click();
        $('.not-needed-if-pdf-provided').remove();
      } else if ($('#attachment-2').val() == '') {
        console.log('trigger 2')
        $('#attachment-2').click();
        $('.not-needed-if-pdf-provided').remove();
        console.log('trigger 2')
      } else if ($('#attachment-3').val() == '') {
        console.log('trigger 3')
        $('#attachment-3').click();
        $('.not-needed-if-pdf-provided').remove();
      } else {
        alert('Maximal 3 Dokumente auswählbar. Entfernen Sie zunächst eines um ein anderes auszuwählen. Tipp: Fügen Sie mehrere Dateien zu einem PDF zusammen.');
      }
    });
    $('#trigger-attachment').on('dragenter', function() { if ($('input.attachment.active').length > 0) $(this).addClass('dragging'); });
    $('#trigger-attachment').on('drop', function() { $(this).removeClass('dragging'); });
    $('#trigger-attachment').on('dragleave', function() { $(this).removeClass('dragging'); });
    $('#trigger-attachment').on('dragexit', function() { $(this).removeClass('dragging'); });
    $('#trigger-attachment').on('dragend', function() { $(this).removeClass('dragging'); });
    $('input.attachment').click(function(event) {
      event.stopImmediatePropagation();
      console.log('click ' + $(this).attr('id'));
    });
    $('input.attachment').change(function() {
      console.log('change');
      $(this).removeClass('active');
      var number = $(this).data('no');
      var displayElement =  $('#display-attachment-' + number);
      if ($(this).val() == "") {
        $(this).addClass('active');
        displayElement.empty();
      } else {
        var file = this.files[0];
        displayElement.html('<div onclick="$(\'#attachment-'+number+'\').val(\'\').addClass(\'active\');$(\'#display-attachment-'+number+'\').empty();">&times; '+file.name+'</div>');
      }
    });
#################### Вот HTML ВХОД -> 
    <div class="col-sm-12 col-md-12 col-lg-8 offset-lg-2">
        <div id="trigger-attachment" class="text-center">
          <img src="https://d17blcsvifkhsu.cloudfront.net/sites/5b056e1c85cde904fb840d8f/theme/images/share.svg?1540384342" style="max-width:40px;">
            <p class="green-label">
              (optional)<br>
            </p>
            <input class="attachment active" id="attachment-3" name="content[attachment_3]" data-no="3" type="file">
            <input class="attachment active" id="attachment-2" name="content[attachment_2]" data-no="2" type="file">
            <input class="attachment active" id="attachment-1" name="content[attachment_1]" data-no="1" type="file">
        </div>
        <div id="display-attachments">
            <div id="display-attachment-1" class="display-attachment"></div>
            <div id="display-attachment-2" class="display-attachment"></div>
            <div id="display-attachment-3" class="display-attachment"></div>
        </div>
    </div>
##### этот класс должен просто скрыть другой 
    <div class="row pb-3 not-needed-if-pdf-provided">
...