Using 'filepond' within a Vue application is causing an issue. In the "process" function, the ID value obtained after transferring the file to the server (response.id) needs to be registered as 'serverId' of the file. Upon checking the 'file' object in the console, it seems to get registered correctly.
mounted() {
setOptions({
server: {
process: (fieldName, file, metadata, load, error, progress, abort) => {
const formData = new FormData();
formData.append('mainData', file);
createmainData(formData, {
onUploadProgress: (event) => {
progress(event.lengthComputable, event.loaded, event.total);
}
})
.then(response => {
const serverId = response.id;
file.serverId = serverId;
load(response, serverId);
})
.catch(error => {
console.log(error);
error('Error uploading file');
});
console.log(file);
},
},
});
}
https://i.sstatic.net/6LW9t.jpg
However, when the 'updatefiles' method is executed and the 'files' are checked in the console, it shows 'serverId: undefined'.
methods: {
updatefiles(files) {
this.files = files.map(files => files.setMetadata);
console.log('files',files );
},
},
https://i.sstatic.net/ZH51Q.jpg
After reading the comments left by the creators,
https://i.sstatic.net/LaVz9.png I have attempted several solutions but seem to be failing. It's possible that I am misunderstanding something. Can anyone provide me with a solution?