getting error 419 in Laravel with Q-uploader

[asdrubalp9]

What happened?

I'm using the qUploader to upload some images to a laravel backend and is returning me a 419 error which I suppose is CSRF error, I tried many variations of this, with credentials, without credentials, with csrf token header and without and still gives a 419 error.

the weird thing is that I tried a new quasar project, copied this code to the new project and it works, even without logging in (which is OK, because that endpoint is open to anyone)

I'm also trying a separated method to send the file to the endpoint (which is working correctly using axios), but I'm trying to abort the upload from the q-uploader by using qUploader.value.abort() and qUploader.value.reset(), and is not aborting the upload from the quploader to prevent trying to send the file a second time.

I'm kind of lost here because I've also compared the request response and headers with the chrome inspect tool at the network tab and the only difference I see is the cookie but not much, perhaps I'm not looking at the right place.

this is an isolated page inside the installation to show a clearer code without all the other mumbo jumbo that still doesn't work

<template>
  <q-page class="flex flex-center">
    <q-uploader
      ref="qUploader"
      counter
      label="Arrastra las fotos aquí o haz click en el [+] seleccionarlas"
      auto-upload
      :factory="factoryFn"
      accept=".jpg, image/jpg"
      multiple
      no-thumbnails
      @rejected="onRejected"
      style="width: 100%; height: 200px"
      bordered
    />
  </q-page>
</template>

<script>
import { defineComponent, ref } from "vue";
import { api } from "boot/axios";

export default defineComponent({
  name: "IndexPage",
  setup() {
    const qUploader = ref(null);

    const factoryFn = (files) => {
      return new Promise(async (resolve, reject) => {
        // let csrfToken = await api
        //   .get("http://127.0.0.1:8000/sanctum/csrf-cookie")
        //   .then((resp) => {
        //     console.log("resp", resp);
        //     return resp.config.headers["X-XSRF-TOKEN"];
        //   });
        console.log("files", qUploader.value);

        resolve({
          url: "http://127.0.0.1:8000/api/v1/reportes-salida-entrada/1/enlace/salida",
          fieldName: "image",
          method: "POST",
          // withCredentials: true,
          // headers: [
          //   { name: "X-CSRF-TOKEN", value: csrfToken },
          //   { name: "X-XSRF-TOKEN", value: csrfToken },
          // ],
        });
      });
    };

    const onRejected = (file) => {
      console.log("onRejected", file);
    };

    return {
      factoryFn,
      onRejected,
      qUploader,
    };
  },
});
</script>

would really appreciate some help with this.
thanks in advanced.

What did you expect to happen?

I was expecting it to work without giving a 419 error.

Reproduction URL

https://stackblitz.com

How to reproduce?

I tried this in a new quasar installation and is working, so I'm not sure what's going on.

Also tried this in a new page in the quasar installation that is not working and it doesn't work.

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite), Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[github-actions[bot]]

Hi @asdrubalp9! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[jeangomes]

@asdrubalp9 Did you solve it? I'm going through the same problem.

[asdrubalp9]

Sort of.
It works on production but not on dev/local.
Didn't do much really, it works sort of fine.

I feel like if q-uploader is quite fickle.

What have you tried?

[jeangomes]

import { Cookies, useQuasar } from 'quasar'
...

headers: [ { name: 'Accept', value: 'application/json' }, { name: 'X-XSRF-TOKEN', value: Cookies.get('XSRF-TOKEN') } ],

[adgower]

dude lifesaver

const uploadFile = (files) => {
  return new Promise((resolve) => {
    resolve({
      url: uploadUrl.value,
      headers: [
        {
          name: 'Accept',
          value: 'application/json',
        },
        {
          name: 'X-XSRF-TOKEN',
          value: Cookies.get('XSRF-TOKEN'),
        },
      ],
      withCredentials: true,
      fieldName: 'image',
      formFields: [
        {
          name: 'product_id',
          value: store.selectedProductId,
        },
      ],
    });
  });
};

<q-uploader
        dusk="image-uploader"
        label="Image"
        flat
        bordered
        color="grey-8"
        class="full-width"
        :factory="uploadFile"
        accept="image/*"
        multiple
        auto-upload
      />