A new file-uploader component has been developed with the following setup:
<template>
<div>
<file-pond
:id="id"
:key="id"
name="files"
ref="pond"
v-bind="$attrs"
v-on:activatefile="onActivateFileClick"
v-on:removefile="onRemoveFileClick"
v-bind:files="files"
/>
</div>
</template>
<script>
import { lookup } from "mime-types";
// Include FilePond
import vueFilePond, { setOptions, addFile } from "vue-filepond";
// Include plugins
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.esm.js";
import FilePondPluginImagePreview from "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.esm.js";
// Include styles
import "filepond/dist/filepond.min.css";
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css";
// Create the FilePond component
const FilePond = vueFilePond(
FilePondPluginFileValidateType,
FilePondPluginImagePreview
);
const FILE_UPLOAD_SERVER_URL = "http://localhost:8181";
export default {
name: "file-uploader",
components: {
FilePond
},
props: {
id: {
type: String,
required: true
},
value: {
default: [],
required: true
}
},
mounted() {
this.files = this.value.map(file => ({
source: file.filePath,
options: {
type: "local",
file: {
name: file.originalFileName,
size: file.fileSize,
type: lookup(file.originalFileName)
}
}
}));
...
},
data: function() {
return {
files: []
};
},
computed: {},
methods: {
onRemoveFileClick: function(error, file) {
...
},
onActivateFileClick: function(file) {
...
}
}
};
</script>
The above component is implemented in the application using the code snippets below:
<file-uploader
id="fileuploader"
key="fileuploader"
v-model="files"
required="true"
allow-multiple="true"
accepted-file-types="application/pdf"
/>
<file-uploader
id="fileuploader1"
key="fileuploader1"
v-model="files1"
required="true"
allow-multiple="true"
accepted-file-types="application/pdf"
/>
During the file upload process of the first component, an input event is emitted. However, the emitted value is being stored in the v-model of the last component (in this case files1) instead of the respective v-model.