Addfile fires before hidden input is populated by file-encode plugin

Hi! Awesome work on this plugin, I love it 😄

I’m trying to dynamically render the preview image (using the base64 string) outside of the plugin. In order to achieve this, I’m trying to get the base64 string as soon as it’s ready so I can update my preview. However, it seems like the FilePond:addfile event fires before the hidden input is created (let alone ready) and FilePond:processfile doesn’t seem to fire at all…?

How can I access the information in the hidden input when a file is added? Is there a special event for when the file-encode plugin is ready?

My attempt:

FilePond.registerPlugin(FilePondPluginFileEncode);

// original input[type=file]
var input = document.querySelector('input');

// upgrade file input to filepond
FilePond.create(input);

var pond = document.querySelector('.filepond--root');

pond.addEventListener('FilePond:addfile', function() {
    // Element doesn't exist yet
    console.log('No element: ', pond.querySelector('input[name="filepond"]'));
   
    setTimeout(function () {
      // Now the element exists and the value is accessible
      console.log('Value: ', pond.querySelector('input[name="filepond"]'));
    }, 5000);
});

pond.addEventListener('FilePond:processfile', function(event) {
    // Doesn't seem to fire at all?
    console.log('Nothing..', event);
});

https://codepen.io/RijkvanZanten/full/QmJLZv

[DamSenViet]

@rijkvanzanten For now as a temporary solution, here’s what I did to detect whether the encoding is finished. I’m just polling every 300ms. To a user it should be imperceptible and seems to work. Let’s assume you’re submitting a form. The following code should work.

var encodedChecker = null; //global namespace
function beginUpload() {
    // only one repeating interval should exist at any time for uploading (assuming you only want to upload one file) 
    if (encodedChecker !== null) {
        clearInterval(encodedChecker); // perfectly safe to clear null, but we don't need to do that.
        encodedChecker = null; // just to be safe
    }

    // set encodedChecker to the interval id
    encodedChecker = setInterval(function() {
        console.log('polling...');

        // if value is there
        if ($('input[name="filepond"]')[0].value !== "") {
            callbackfunction(); // start actual upload
            clearInterval(encodedChecker);
        }
    }, 300);
};

If you’re not using a form to submit, you may need to check for whether the hidden element exists before calling the starting the interval!

[rikschennink]

@rijkvanzanten @DamSenViet Just published version 1.2.11 of FilePond and 1.0.4 of the File Encode plugin. Should fix the issue.