Научитесь динамически создавать несколько экземпляров библиотеки изображений Filepond на одной странице или в одном блоке.

Пока я работаю над одним из своих проектов Laravel, я работаю с библиотекой загрузки файлов Filepond. Затем мне нужно создать несколько экземпляров Filepond на одной странице, а также поле ввода будет генерироваться динамически, так как многие пользователи хотят создать в ядре Javascript. К сожалению, я не нашел никаких полезных ресурсов по этому поводу, и после нескольких попыток мне удалось создать столько динамических экземпляров Filepond, сколько вы хотите на своей веб-странице. Сегодня я собираюсь поделиться этим со всеми вами. Если это понадобится в будущем, помочь можно каждому.

Сначала добавьте ссылку на эту библиотеку Filepond в заголовок страницы.

<link href="https://unpkg.com/filepond@^4/dist/filepond.css" rel="stylesheet" />
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet" />
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/filepond@^4/dist/filepond.js"></script>

Затем вам нужно добавить HTML-код для создания экземпляра библиотеки Filepond. И раздел, в котором вы покажете только что созданный экземпляр Filepond

<!-- Input field for file -->
<input id="pond1" type="file" class="filepond imageOptions" name="image_options[]" data-allow-reorder="true" data-max-file-size="2MB" data-max-files="4"/>
<!-- Button to add more input field -->
<button type="button" class="btn btn-dark btn-sm addOptions"> Add More</button>
<!-- section where the dynamic inputf field appear-->
<div class="multipleOptions">
</div>

Не забудьте указать имя идентификатора и полное имя класса, которое нам понадобится в следующих нескольких шагах.

Выберите целевой раздел для отображения

//wrapper where the new input field will appear
 var wrapper = $('.multipleOptions');

Добавить событие onClick для создания нового динамического экземпляра Filepond

//Once add button is clicked create new filepond image upload option
 $(addButton).click(function(){
     optionCount++;
     var fieldHTML =`<input id="pond${optionCount}" type="file" class="filepond imageOptions" name="image_options[]" data-allow-reorder="true" data-max-file-size="2MB" data-max-files="4"/>`;
     $(wrapper).append(fieldHTML);

     let pondId = "pond" + optionCount;
     loadFilepond(pondId);
 });

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

//call first instance of filepond
 loadFilepond('pond1');

 //create and load multiple filepond instance dynamically on addButton click
 function loadFilepond( filePondId ){
     console.log('input#' + filePondId);
     let inputElement = document.querySelector('input#' + filePondId);
     FilePond.create(inputElement);
     FilePond.setOptions({
         allowMultiple: true,
         server: {
             url :  "/uploads/tmp",
             headers: {
                 'X-CSRF-TOKEN' : '{{ csrf_token() }}'
             }
         }
     })
 }

Основная цель этой функции — получить уникальный сгенерированный идентификатор и создать новый экземпляр для библиотеки Filepond.

Не стесняйтесь поделиться со мной своими мыслями, и если у вас есть предложения, вы также можете разместить их здесь.