myFiles doesn't get binded upon any change

[adhamfarrag]

Is there an existing issue for this?

• I have searched the existing issues

Have you updated Vue FilePond, FilePond, and all plugins?

• I have updated FilePond and its plugins

Describe the bug

myFiles object doesn't get binded after any change. I'm using V6 with Nuxt.js V2.

             <div>
                  <client-only>
                    <file-pond
                      name="filepond"
                      ref="profilePictureUpload"
                      label-idle="Drag and Drop your picture or <span class='filepond--label-action'>Browse</span>"
                      allow-file-type-validation="true"
                      allowMultiple="false"
                      instantUpload="false"
                      allowReplace="true"
                      accepted-file-types="image/png, image/jpeg"
                      allowDrop="true"
                      allowRemove="true"
                      allowImagePreview="true"
                      allowImageCrop="true"
                      allowImageEdit="true"
                      allowImageResize="true"
                      allowImageTransform="true"
                      allowImageExifOrientation="true"
                      checkValidity="true"
                      maxFiles="1"
                      imagePreviewHeight="170"
                      imageCropAspectRatio="1:1"
                      imageResizeTargetWidth="200"
                      imageResizeTargetHeight="200"
                      stylePanelLayout="compact circle"
                      styleLoadIndicatorPosition="center bottom"
                      styleProgressIndicatorPosition="right bottom"
                      styleButtonProcessItemPosition="right bottom"
                      styleButtonRemoveItemPosition="left bottom"
                      :files="myFiles"
                      :init="handleFilePondInit"
                      :processFile="handleFilePondProcessfile"
                      :removeFile="handleFilePondRemovefile"
                      :addfile="handleOnaddfile"
                    />
                  </client-only>
                </div>

import vueFilePond from 'vue-filepond'
import 'filepond/dist/filepond.min.css'
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'
import FilePondPluginImagePreview from 'filepond-plugin-image-preview'
import FilePondPluginImageCrop from 'filepond-plugin-image-crop'
import FilePondPluginImageEdit from 'filepond-plugin-image-edit'
import FilePondPluginImageResize from 'filepond-plugin-image-resize'
import FilePondPluginImageTransform from 'filepond-plugin-image-transform'
import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation'
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css'
import 'filepond-plugin-image-edit/dist/filepond-plugin-image-edit.css'
const FilePond = vueFilePond(
  FilePondPluginFileValidateType,
  FilePondPluginImagePreview,
  FilePondPluginImageCrop,
  FilePondPluginImageEdit,
  FilePondPluginImageResize,
  FilePondPluginImageTransform,
  FilePondPluginImageExifOrientation
)

export default {
  data() {
    return {
      myFiles: [],
      }
  },

  methods: {
    handleFilePondInit() {
      console.log('FilePond has initialized')
    },
    handleFilePondProcessfile(error, file) {
      console.log('FilePond succesfully processed file ' + file)
      this.myFiles.push(file)
      this.$nextTick()
    },
    handleOnaddfile(error, file) {
      console.log('FilePond succesfully added file ' + file)
    },
    handleFilePondRemovefile(file) {
      console.log('FilePond deleted file ' + file)
      var index = this.myFiles.indexOf(file)
      if (index > -1) {
        this.myFiles.splice(index, 1)
        this.$nextTick()
      }
    },
  },


 
  components: {
    FilePond,
  },
}

Reproduction

Created a component including user profile form, and added this component to it in the right fields.

Environment

- Device: Macbook Pro 2015
- OS: macOS 11.6
- Browser: Brave/Firefox.
- Vue version: Nuxt.js 2.15.8

[rikschennink]

Please provide a test case. It looks like you're not overwriting the myFiles object just pushing and splicing so vue might not catch the update? I advice to test without using plugins first.

[ryntab]

I had the same issue binding to files did nothing. I ended up just using the updateFiles event and setting the parameter to a component variable. This should work for you 😀

<template>
<div>
    <file-pond name="test" ref="pond" label-idle="Drop files here..." v-bind:allow-multiple="true" accepted-file-types="image/jpeg, image/png" v-on:updatefiles="updateFiles" />
</div>
</template>

<script>
// Import Vue FilePond
import vueFilePond from "vue-filepond";

// Import FilePond styles
import "filepond/dist/filepond.min.css";

// Import image preview plugin styles
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css";

// Import image preview and file type validation plugins
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";

// Create component
const FilePond = vueFilePond(
    FilePondPluginFileValidateType,
    FilePondPluginImagePreview
);

export default {
    name: "app",
    data: function () {
        return {
            myFiles: []
        };
    },
    methods: {
        updateFiles(files) {
            this.myFiles = files;
            this.$root.$emit('updatePendingFiles', this.myFiles);
        },
    },

    components: {
        FilePond,
    },
};
</script>

[Tofandel]

Your issue is very simple, you're not using events but props, so your methods will never be called (the casing is also wrong)

Instead of

                      :init="handleFilePondInit"
                      :processFile="handleFilePondProcessfile"
                      :removeFile="handleFilePondRemovefile"
                      :addfile="handleOnaddfile"

Use

                      @init="handleFilePondInit"
                      @processfile="handleFilePondProcessfile"
                      @removefile="handleFilePondRemovefile"
                      @addfile="handleOnaddfile"