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

[rijkvanzanten]

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

[rijkvanzanten]

Maybe the file-encode plugin could emit an event when the worker is done?

https://github.com/rijkvanzanten/filepond-plugin-file-encode/blob/e4e41f9be925d01c722c7330a86b590dab99ba7e/dist/filepond-plugin-file-encode.js#L71-L100

[DamSenViet]

Ah I understand. The problem here is that when the FileReader object is called to read in the data uri, it does it ASYNCHRONOUSLY. You have to wait for the readIn to finish before it's ready.

Also your processFile() only works when you set the server option when you create the object or when you setOptions. As default, it will attempt to upload or processFile() when you drop in a file / add a file unless you specified instantUpload: false. Check out the docs.

To be more specific. You never processed the file in the first place. Process file simply initiates the upload sequence. If you don't specify where it should upload, processFile will never fire.

[rijkvanzanten]

Ahhh gotcha! I didn't realize from the docs that the process events were for server only. I think this boils down to the feature request for an event onencode :)

[rikschennink]

Hi @rijkvanzanten and @DamSenViet !

I would like the addfile event to fire after the file has been encoded, having a separate file encoded event might be a bit confusing, also, is another plugin does some other alterations on the file we'd need another event to track when it's done.

The file encode action is currently run after the load of the file, which causes the event to fire before the encoding is done. What makes this tricky is that the File Encode plugin will have to apply any output transforms ( resizing, cropping ) which are only applied when the interface is in an idle state ( otherwise these actions would block the UI ).

I'm looking to creating a hook that allows plugins and other heavy internal processes to be run at certain moments without interfering with the normal flow of the events.

• add file ( drop, browse or use api )
• create file item
• get file data ( could be on a remote server )
• get file data progress
• file loaded
• apply file transformations ( this needs to happen when the interface is idle, but should ideally be skipped when no transformations are required )
• addfile event!

[DamSenViet]

Even better, allow us to set certain properties on the FileReader object when FileEncode is allowed, but before FileReader actually starts reading. So you can keep most of the source code intact this way with minimal addition. Like just letting us pass in an object with key and values. Set those key and value properties for us and voila.

Or what you can do is allow us to pass in our own FileReader object (if the actual FileReader object is left pretty much intact). When we setOptions, allow us to set a custom FileReader object and make a copy of that to read in.

Allow us to edit the FileEncode at least lets us figure out when the encoding is finished.

[rikschennink]

@DamSenViet I'd consider that a suboptimal solution as it would require devs to have knowledge of FilePond's internal systems in order to use the file encode plugin. Whether you're uploading async or encoding files, the addfile event should be fired when the file has been fully added. Using plugins should be as easy as registering them and setting some options, seamless.

If you do need access to the FileReader you can fork the file-encode plugin and add a callback option to the configuration object.

[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.

[DamSenViet]

Awesome and thank you so much! Will you be updating the npm modules too?

[rikschennink]

@DamSenViet Noth npm modules have been updated as well.