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

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

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

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

[rikschennink]

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

[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

[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 :)

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

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

[rikschennink]

@DamSenViet Noth npm modules have been updated as well.