vue-filepond: Binding to "files" variable doesn't updates after file upload"

I’ve created a component with this bindings:

<file-pond name="test"
                   ref="pond"
                   label-idle="Перетащите сюда файлы..."
                   max-files="4"
                   allow-multiple="true"
                   accepted-file-types="csv, shx, shp, dbf"
                   server="/Loader/Upload"
                   v-bind:files="myFiles"
                   v-on:init="handleFilePondInit" />
        <div v-for="(item, index)  in myFiles">
            <input asp-for="filenames[i]" v-bind="item" type="hidden" />
        </div>

But v-for doesn’t work because “myfiles” doesn’t update

About this issue

Original URL
State: open
Created 6 years ago
Reactions: 12
Comments: 18

Most upvoted comments

Hi @rikschennink I made this workaround for the problem:

export default Vue.extend({
    template: "#dataloader-template",
    data() {
        return {
            myFiles: [],
            uploadedFiles: []
        };
    },
    methods: {
        handleFilePondInit: function () {
            console.log('FilePond has initialized');
        },
        handleFilePondProcessfile: function (error, file) {
            console.log("FilePond succesfully processed file " + file);
            this.uploadedFiles.push(file.filename);
            this.$nextTick();
        },
        handleFilePondRemovefile: function (file) {
            console.log("FilePond deleted file " + file.filename);
            var index = this.myFiles.indexOf(file.filename);
            if (index > -1) {
                this.uploadedFiles.splice(index, 1);
                this.$nextTick();
            }
        }
    }
});

I haven’t got enough work time on weekdays for adding this functionallity to vue-filepond but I think I can make it on the weekend 😃

+11

novikov-alexander-zz on Apr 1, 2019

@jaymefrantz You probably already figured it out, but you need to use something like this:

<file-pond
  @processfile="handleFilePondProcessfile"
  @removefile="handleFilePondRemovefile"
  ...
></file-pond>

See the list of available callbacks, but you have to remove the on prefix.

I’m not sure if the removefile callback is meant to be used in the example by @novikov-alexander-zz or processfilerevert, since the function signature for removefile needs to have an error as first argument, not a file:

handleFilePondRemovefile: function (error, file) {

avioli on Jun 29, 2021

That will be an awesome functionality, in my case I don’t want to make automatic updates to the server and having a lot of refs can be a hassle. This will simplify getting the files 💯

larizzatg on May 30, 2018

Hi. Sorry to “reanimate” this issue, but has any of you managed to implement this in the current build?

oiagorodrigues on Mar 10, 2019

Hi @novikov-alexander the files binding is currently only for programmatically adding initial files, or updating the current file set, it doesn’t (currently) reflect the state of loaded (dropped) files.

I’ll see if I can add this in a future release ( pull requests are also welcome ) as it would be a very useful feature to have.

rikschennink on May 23, 2018