Binding to "files" variable doesn't updates after file upload"

[novikov-alexander-zz]

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

[rikschennink]

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.

[novikov-alexander-zz]

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

[rikschennink]

@novikov-alexander Awesome! I'll definitely test this later this week.

[larizzatg]

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 💯

[oiagorodrigues]

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

[Wifsimster]

@oiagorodrigues I use a similar solution as @novikov-alexander #18 (comment) (i don't know why he uses this.nextTick())

[jaymefrantz]

I apologize in advance for the silly question, but what events are firing the handleFilePondProcessfile and handleFilePondRemovefile from @novikov-alexander-zz example? The html for the filepond component is omitted and nothing I've tried has worked.

[avioli]

@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) {

[scil]

Now we can use the Added v-model support

[HassanZahirnia]

@scil Do you have any example on how that works ? I still can't get list of uploaded files, not with :files and not with v-model
I'm using Vue 3 btw

[scil]

@scil Do you have any example on how that works ? I still can't get list of uploaded files, not with :files and not with v-model I'm using Vue 3 btw

i use vue 2

<template>
    <file-pond
      name="file-uploader"
      ref="pond"
      credits="false"
      :label-idle="labelIdle"
      :allow-multiple="false"
      accepted-file-types="image/*"
      :server="server"
      :files="setFiles"
      v-model="currentFiles"
      :dropOnElement="!dropOnPage"
      :dropOnPage="dropOnPage"
      @init="handleFilePondInit"
    />
<!--      @processfile="onProcessfile"-->
<!--      @removefile="onRemovefile"-->
<!--      @addfile="onAddfile"-->
</template>

related var:

  data: function () {
    return {
      currentFiles:null,  // I think it is same as this.$refs.pond.getFiles()
       ....
    };
  },

[HassanZahirnia]

@scil Thanks for sharing. Unfortunately I could not get it working with Vue 3. The usage with the Vue adapter is confusing as they're not many examples around.

For now I just went with pure Javascript. It's easier this way since there is 1 less layer to deal with and instead of focusing on how the Vue adapter works I can focus on the library itself and get my app built quickly 👍

[scil]

@scil Thanks for sharing. Unfortunately I could not get it working with Vue 3. The usage with the Vue adapter is confusing as
For now I just went with pure Javascript. It's easier this way since there is 1 less layer to deal with and instead of focusing on how the Vue adapter works I can focus on the library itself and get my app built quickly 👍

I agree with you. At First i used pue js, but later I went to vue-filepond, because I'am working with a large vue app where filepond is just a part.

maybe you can just test v-model="currentFiles" to get the current files, while :files="setFiles" is to set the initial files.

[shivam464]

@novikov-alexander-zz how can I achieve this with javascript?

[aonghas]

Anyone else managed to get v-model working with vue3?

[aonghas]

In case anyone needs to know how it works in vue3:

<template>
 <file-pond   
        name="photoupload"
        ref="pond"
        @updatefiles="onUpdateFiles"
      />
</template>
      
<script setup>
      const pondFiles = ref([]);

      function onUpdateFiles(files) {
        pondFiles.value = files;
      }

</script>

[rootwalla]

@aonghas The problem with your solution is that updateFiles seems to fire (and emit) files as soon as they are added to the component, before they finish uploading (processfile event). So if they fail they are still emitted as added. The same is true of the new Input event. This is not acceptable behaviour for my needs.

So I use processfile and removefile events to emit "update:modelValue" with props.modelValue bound to :files, but this seems to come with it's own problem. As soon as I emit a "update:modelValue" from the processfile event handler, this updates the parent v-model which in return updates my :files bind, which then fires a removeFile event (since :files seems to clear the internal store) and this ends up clearing the whole component...

@rikschennink Either updating :files should not emit removefile (or at least not fire for files that already exist in the state) or :files needs to become fully reactive (i.e. v-model).

If any of you have any suggestions how to bridge this gap now, I will be extremely thankful (I really don't wish to switch upload components because of this)

[rikschennink]

@rootwalla I'm addressing this in FilePond v5 where files always reflects the current state.

[Dakraid]

Has there been any clear solution to this yet?

I have tried several solutions, so far only updatefiles has been working, ie. my current code below doesn't fire the events at all. On top of it, with updatefiles the images aren't updated when combining it with Pintura which I recently got a license for as well.

I use Nuxt3/Vue3. If anyone has a solution, please let me know until the model binding works. Thank you!

<script setup lang="ts">
const myFiles = ref<FilePondFile[]>([]);

const handleFilePondProcessFile = (error: FilePondErrorDescription | null, file: FilePondFile) => {
    console.log('FilePond successfully processed file ' + file.filename);
    pondFiles.value.push(file);
    nextTick();
};

const handleFilePondRemoveFile = (error: FilePondErrorDescription | null, file: FilePondFile) => {
    console.log('FilePond deleted file ' + file.filename);
    const index = myFiles.value.indexOf(file);
    if (index > -1) {
        pondFiles.value.splice(index, 1);
        nextTick();
    }
}; 
</script>
<template>
	<ClientOnly>
		<FilePond
		  ref="pond"
		  accepted-file-types="image/png"
		  :allow-multiple="true"
		  :image-editor="pinturaEditorConfig"
		  :files="myFiles"
		  @processfile="handleFilePondProcessFile"
		  @removefile="handleFilePondRemoveFile" />
	</ClientOnly>
</template>

EDIT: Seems like the binding doesn't work because of TypeError: 'caller', 'callee' and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.invokeGetter so this might be a different bug?

[Alex-Ri]

I have the same issue using nuxt3 and vue 3. Are there any updates on that topic?