My module has add form and edit form. In the edit form, it will show uploaded files
But my problem is each file displays same file size on all files
My component vue is like this :
<file-pond
name="test"
ref="pond"
label-idle="Drop files here or <span class='filepond--label-action'>Browse</span>"
allow-multiple="true"
v-bind:files="myFiles"
v-bind:server="myServer"
/>
The script is like this :
export default {
name: "FilePondDemo",
data() {
return {
// myFiles: []
filesFromApi: [
{
id: "1",
name: "test1.jpg",
url: "https://id.m.wikipedia.org/wiki/Berkas:Cat03.jpg",
size: 20000,
},
{
id: "2",
name: "test2.jpg",
url:
"https://upload.wikimedia.org/wikipedia/commons/a/a5/Red_Kitten_01.jpg",
size: 30000,
},
],
myFiles: [],
myServer: {
process: (fieldName, file, metadata, load, error, progress, abort) => {
console.log(file);
if (file.lastModified) {
/* this is used for upload file */
/* axios(config)
.then(response => { ... */
} else {
/* this is used for edit form / show files uploaded */
/* get metadata & save in vuex store */
/*this.saveUploadFile({
id: metadata.id,
name metadata.name,
url: metadata.url,
size: metadata.size
})*/
console.log(metadata);
load(metadata.id);
}
},
},
};
},
mounted() {
for (let key in this.filesFromApi) {
let fileData = {
source: this.filesFromApi[key].name,
options: {
// type: "local",
// file: {
// name: this.filesFromApi[key].name,
// size: this.filesFromApi[key].size,
// },
metadata: {
id: this.filesFromApi[key].id,
name: this.filesFromApi[key].name,
url: this.filesFromApi[key].url,
size: this.filesFromApi[key].size,
},
},
};
this.myFiles.push(fileData);
}
},
components: {
FilePond,
},
};
Demo is like this :
https://codesandbox.io/s/vue-filepond-live-demo-forked-tt1u1s
The displayed data was fetched from an API and sent using metadata to the filepond process and it worked. But the file size for all files is the same
If I uncomment this script :
file: {
name: this.filesFromApi[key].name,
size: this.filesFromApi[key].size,
},
It success get the file size correctly. But I can't get the metadata because process of filepond is not being called. You can try the code for make sure
Hope someone helps. Thanks