jQuery .getFiles is not a function

[Racquetballer]

Bare with me.. I'm very new at this. I have the following code in jQuery and am trying to get the list of files using getFiles() method.

    FilePond.registerPlugin(
        FilePondPluginImagePreview,
        FilePondPluginImageExifOrientation,
        FilePondPluginFileValidateSize,
        FilePondPluginFileValidateType
    );

    $('.filePond').filepond({
        acceptedFileTypes: ['image/jpeg', 'video/mp4'],
        fileValidateTypeLabelExpectedTypesMap: { 'image/jpeg': '.jpg', 'video/mp4': '.mp4' },
        allowFileTypeValidation: true,
        instantUpload: true,
        labelIdle: 'Drag & Drop your pictures & video or <span class="filepond--label-action">Browse</span>',
        maxFileSize: '100MB',
        maxTotalFileSize: '100MB',
        server: {
            url: '/includes/ajax.asp',
            process: {
                url: '?Action=ProcessUpload',
                onload: test
            },
            fetch: null,
            revert: null
        }
    });

    function test() {
        console.log( FilePond.getFiles() );
    }

SUMMARY After successfully processing a file the test() function executes and errors out with Uncaught TypeError: FilePond.getFiles is not a function

I have also tried using $('.filePond').filepond().getFiles() which also errors out.

EXPECTED BEHAVIOR I would like to get a list of all the files processed.

Environment	Version
OS	Windows 10
Device	Desktop
Browser	Chrome 72.0.3626.119

[Racquetballer]

After some more testing I was able to figure it out.

function test() {
    var files = $('.filePond').filepond('getFiles');
    $(files).each(function (index) {
        console.log(files[index].fileExtension);
    });

}

If there is an easier way to do this let me know. Thanks for creating this excellent plugin!

[rikschennink]

That’s how it should be done with when using the jQuery adapter.

[ricardoccpaiva]

@Racquetballer why is it like that ? and btw, it works 😄 thanks !

[vovkandrew]

@rikschennink Hi Rick, sorry for bothering you right here, but, unfortunately, I didn't find another way to ask a question. I successfully implemented your awesome Filepond plugin with jquery but faced with an issue. The issue is that on a page load the basic input elements are not instantly replaced by Filepond drag'n'drop zones. Other words, when I go to the page with Filepond drag'n'drop zone being set up, first I will see HTML input element for a second or even less, and then it will be replaced (covered) by Filepond drag'n'drop zone. Is that Okay or I did something wrong/incorrectly? Thank you in advance and take care! :)

[rikschennink]

@vovkandrew FilePond enhances the existing file input, so until the script loads, the original input will remain visible. Either load FilePond faster, or hide the original input until FilePond loads.

Will close the issue as the original question was resolved some time ago : )