[Bug] Vue FilePond v-on:processfiles not working, event is not firing.

[mrkazmierczak]

Is there an existing issue for this?

• I have searched the existing issues

Have you updated FilePond and its plugins?

• I have updated FilePond and its plugins

Describe the bug

vue-filepond version

FilePondProcessFileStart is working when files start loading I have info in console that Process File Start and the submit button is changing state to loadingFiles = true, but when all files are processed and upload is complete handleFilePondProcessFiles is not showing console message All files process so I think this even is not fired when all files are processed and the state of submit button is not change to loadingFiles = false.

Reproduction

I have added to the FilePond component those two event handlers to block submit button.

v-on:processfiles="handleFilePondProcessFiles"
v-on:processfilestart="handleFilePondProcessFileStart"

In my methods
handleFilePondProcessFileStart() {
this.loadingFiles = true;
console.log('Process File Start');
},
handleFilePondProcessFiles() {
this.loadingFiles = false;
console.log('All files processed');
},

My submit button has :disabled = loadingFiles state

Environment

- Device: mac
- OS: macOS Mojave
- Browser: Chrome

[mrkazmierczak]

Ok. Event is firing but working not as expected. I have added

onprocessfiles: () => { }

to the FilePond component settings

And this is working when I'm creating new FilePond and uploading new files into it. But not working when I'm using FilePond on edit where I have for example two already loaded files and I want to load new one to those two existing files. Then event is not firing onprocessfiles.

[rikschennink]

Does this also happen with the javascript library?

[mrkazmierczak]

This is not working also with JavaScript library. Event is not firing.

Maybe there is a problem with already loaded files, and maybe those loaded files don't have PROCESSING_COMPLETE label.

My files have set options. Is there anything more needed?

options: {
type: "local"
}

How to set already processed to files loaded on edit?

[mrkazmierczak]

I've just send fresh portion of 3xcaffeine to you :D

[rikschennink]

Appreciate it. 🙏

If files are local they are on the server and not downloaded, if you want to set them to "green" state then you have to set type to "limbo"

[mrkazmierczak]

Rik, I have recorded a movie describing my problem. Please have a look:

https://www.youtube.com/watch?v=OS11yZPJWoY

[mrkazmierczak]

Any idea?

[rikschennink]

I think this is a bug, looks like the logic that triggers the onprocessfiles event doesn't take into account already local/limbo files.

As an alternative you could get the current files list, determine which files are uploaded or not, and then listen to "processfile" to check if all files are uploaded.

Another way is checking the code to see if there is a PR, but I'm honestly kind of behind on those.

[mrkazmierczak]

Rik, I think you need more caffeine to resolve this problem. Probably there is a problem in return of this function. I'm talking about those lines:

                return (
                    !(item.status === ItemStatus.IDLE && item.origin === FileOrigin.LOCAL) &&
                    item.status !== ItemStatus.PROCESSING &&
                    item.status !== ItemStatus.PROCESSING_COMPLETE &&
                    item.status !== ItemStatus.PROCESSING_REVERT_ERROR
                );

    var processFiles = function processFiles() {
        for (
            var _len3 = arguments.length, args = new Array(_len3), _key3 = 0;
            _key3 < _len3;
            _key3++
        ) {
            args[_key3] = arguments[_key3];
        }
        var queries = Array.isArray(args[0]) ? args[0] : args;
        if (!queries.length) {
            var files = getFiles().filter(function(item) {
                return (
                    !(item.status === ItemStatus.IDLE && item.origin === FileOrigin.LOCAL) &&
                    item.status !== ItemStatus.PROCESSING &&
                    item.status !== ItemStatus.PROCESSING_COMPLETE &&
                    item.status !== ItemStatus.PROCESSING_REVERT_ERROR
                );
            });

            return Promise.all(files.map(processFile));
        }
        return Promise.all(queries.map(processFile));
    };

I'm not familiarized with FilePond code, and probably you are the only one who can change this without making disaster. Could you please take a look at this issue in the next few days?

[rikschennink]

As an alternative you could get the current files list, determine which files are uploaded or not, and then listen to "processfile" to check if all files are uploaded.

@mrkazmierczak I truly appreciate the donation but please note that a donation !== supportTime, there's no exchange of goods/service bound to the donation.

I've suggested an alternative path in my comment above.

[mrkazmierczak]

@rikschennink Ok. I understand and also I'll be honest... So we have quite good looking file uploader with creepy documentation and some errors... but those errors are basic. I'm reading documentation... finding event and this event not working. I'm finding hook, I want to use it... and this hook also not working (issue #889). I'm trying to find solution over the internet... and I didn't find advanced samples of FilePond usage. Now I know why...

Maybe it's time for non open source version without bugs and with documentation with samples of usage...

To sum up, if you want to use filepond, you need to read the code of this plugin (more than 12000 lines) as you would be its author, because only then will you know how to use its full potential and you have to write a lot of additional code to make it works.

I'm tired of using FilePond right now, I spent a month on it laboriously running all its functions. At the very end, when I have almost reached the end, I find out that two key functions for me do not work. ok is there any contributors interested in patching bugs in FilePond? I will pay.

Your answer about checking which file is loaded which not is really enigmatic. I don't know how to check it?