Question:

How to upload images with filepond and vue 3?

Problem

I´m trying to upload an image with the filepond library. My problem it´s that the return 419 error

to build my component in Vue, I’m trying this 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 an example that it´s written 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,

};

I´m sending headers with token, but i don´t know if i can send this data so.

Solution

Seem like a problem with your csrf token

HTTP response status code 419 Page Expired is an unofficial client error that is Laravel-specific and returned by the server to indicate that the Cross-Site Request Forgery (CSRF) validation has failed. Source: >https://http.dev/419#:~:text=HTTP%20response%20status%20code%20419,(CSRF)%20validation%20has%20failed.

Change $('meta[name="csrf-token"]').attr('content') by document.querySelector('meta[name="csrf-token"]').content

Answered by: >Daniel Ballesteros

Credit: >StackOverflow

Blog links:

>How to show encrypted user id in URL in Laravel?

>How to fix Laravel LiveWire listener?