vue-filepond
vue-filepond copied to clipboard
myFiles doesn't get binded upon any change
Is there an existing issue for this?
- [X] I have searched the existing issues
Have you updated Vue FilePond, FilePond, and all plugins?
- [X] 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
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.
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>
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"