Dynamically loading multiple FilePond instances

Question

I have a page where multiple input file fields are dynamically added to the DOM, and each should be converted to a FilePond.

Here is a Codepen to simulate my issue: https://codepen.io/veur/pen/pooZWoo

• Click "Load FilePond 1" and upload a file: the FilePond:addfile event is triggered
• Click "Load FilePond 2": the FilePond:addfile event is triggered again for the first FilePond

When the second file element is created, I only want that element to be converted to a FilePond. Is there a FilePond method to load only non-converted file inputs?

Answer 1

Okay, so I guess this what you are looking for.

You were using the class name to create a file pond and since you are using the same class for both the file upload and that was creating a problem.

Always use ID when you want two elements to work independently of each other.

I am giving a unique ID for both file upload and passing it to loadFilePond function.

I hope this helped you.

Code 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>

Answer 2

I have created a dynamic file pond instance in pure JavaScript anyone can try this with one of my PHP projects.

// Default Html input for Filepond 
<input id="pond1" type="file" class="filepond d-none imageOptions" name="image_options[]" data-allow-reorder="true" data-max-file-size="2MB" data-max-files="4" accept="image/png, image/jpeg, image/gif" />
             
//wrapper where the new input field will appear
var wrapper = $('.multipleOptions');
        
// 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() }}'
            }
        }
    })
}