I am currently facing an issue while trying to upload an image using the filepond library. The problem I am encountering is that it returns a "419 error."
As I construct my component in Vue, I have been experimenting with the following code:
<file-pond
name="back_dni"
ref="pond"
class-name="my-pond"
label-idle="DNI trasero"
allow-multiple="false"
accepted-file-types="image/jpeg, image/png"
v-on:init="handleFilePondInit"
server="/commercial/uploadDocuments"
/>
In my script, I have included an example that is provided in the documentation:
all import to create Filepond
.....
// Create FilePond component
const FilePond = vueFilePond(FilePondPluginImagePreview,FilePondPluginFileValidateType);
setOptions({
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
server: {
process: {
url: '/commercial/uploadDocuments',
method: 'POST',
withCredentials: false,
onload: (response) => response.key,
onerror: (response) => response.data,
ondata: (formData) => {
formData.append('Hello', 'World');
return formData;
},
},
revert: './revert',
restore: './restore/',
load: './load/',
fetch: './fetch/',
}
});
export default {
name: 'uploadDniBack',
data: function () {
return {
myFiles: []
};
},
methods: {
handleFilePondInit: function () {
// example of instance method call on pond reference
this.$refs.pond.getFiles();
},
},
components: {
FilePond,
},
};
Although I am sending headers with the token, I am unsure about whether I can send this data successfully.