Научитесь динамически создавать несколько экземпляров библиотеки изображений 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.
Не стесняйтесь поделиться со мной своими мыслями, и если у вас есть предложения, вы также можете разместить их здесь.