Динамическая загрузка нескольких экземпляров FilePond - PullRequest
Новая
       9

Динамическая загрузка нескольких экземпляров FilePond

0 голосов
/ 11 ноября 2019

У меня есть страница, где несколько полей входного файла динамически добавляются в DOM, и каждое из них должно быть преобразовано в FilePond.

Вот кодекс, имитирующий мою проблему: https://codepen.io/veur/pen/pooZWoo

  • Нажмите «Загрузить FilePond 1» и загрузите файл: событие FilePond:addfile запущено
  • Нажмите «Загрузить FilePond 2»: событие FilePond:addfile снова будет запущено для первого FilePond

Когда создается второй элемент файла, я хочу, чтобы этот элемент был преобразован только в FilePond. Существует ли метод FilePond для загрузки только неконвертированных файловых данных?

1 Ответ

0 голосов
/ 11 ноября 2019

Хорошо, я думаю, это то, что вы ищете.

Вы использовали имя класса для создания файлового пруда, и поскольку вы используете один и тот же класс как для загрузки файла, так и для создания файла. проблема.

Всегда используйте ID, если хотите, чтобы два элемента работали независимо друг от друга.

Я даю уникальный идентификатор как для загрузки файла, так и для передачи его в функцию loadFilePond.

Я надеюсь, что это помогло вам.

Код Pen

https://codepen.io/hasnentrebdingcodes/pen/mddjXKo

$(function(){
    // First register any plugins
    $.fn.filepond.registerPlugin(
        FilePondPluginImagePreview
    );

    // Create FilePond element
    $(document).on('click', '.fp1', function(e) {
      $('.pond1').html(`<input type="file" id="fp-1"
      class="filepond"
      name="filepondone" 
      multiple 
      data-allow-image-edit="false"
      data-max-file-size="3MB"
      data-max-files="3">`);

      loadFilePond('fp-1');
    });

    // Create second FilePond element
    $(document).on('click', '.fp2', function(e) {
      $('.pond2').html(`<input type="file" id="fp-2"
      class="filepond"
      name="filepondtwo" 
      multiple 
      data-allow-image-edit="false"
      data-max-file-size="3MB"
      data-max-files="3">`);

      loadFilePond('fp-2');
    });
});

// Turn input element into a pond
function loadFilePond(clickedFP) {
    $('#'+clickedFP).filepond({
        allowMultiple: true,
          server:{
              process: {
                  url: '/api'
              }
          }
    });

    // Listen for addfile event
    $('#'+clickedFP).on('FilePond:addfile', function(e) {
        console.log('file added event', e);
    });
}
<a href="#" class="fp1">Load FilePond 1</a>
<div class="pond1"></div>

<a href="#" class="fp2">Load FilePond 2</a>
<div class="pond2"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">



<!-- include FilePond library -->
<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>

<!-- include FilePond plugins -->
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>

<!-- include FilePond jQuery adapter -->
<script src="https://unpkg.com/jquery-filepond/filepond.jquery.js"></script>
...