[Bug] Cookie base authentication doesn't work

[devalade]

Is there an existing issue for this?

• [X] I have searched the existing issues

Have you updated React FilePond, FilePond, and all plugins?

• [X] I have updated FilePond and its plugins

Describe the bug

withCredentials doesn't work in the cookie base authentication

Reproduction

• You should a cookie base authentication with your api

<FilePond
        files={files}
        onupdatefiles={setFiles}
        server={{
            url:  "<url>",
            process: {
                url: '/process',
            },
            headers: {
                withCredentials: true,
            },
        }}
        name='file' /* sets the file input name, it's filepond by default */
        labelIdle='Déposez un fichier ou <span class="filepond--label-action">Sélectionnez</span>'
    />

Environment

- Device: HP Envy 
- OS: Fedora 36
- Browser: Brave
- React version: React 18

[rikschennink]

It's an issue with CORS configuration, see errors in dev console.

[devalade]

It's not the CORS. I was testing something in the backend to check if it would work. It works when I do this. And I can contribute by fixing the problem.

[rikschennink]

It's be cause withCredentials is not a header, it should be set on the action, see doc: https://pqina.nl/filepond/docs/api/server/#object-configuration

{
    url:  "<url>",
    process: {
        withCredentials: true,
    url: '/process'
    },
}

[devalade]

It doesn't work. I have solved my problem.

[andreknieriem]

And how did you solve it?

[devalade]

And how did you solve it?

<FilePond
            files={files}
            // @ts-ignore
            onupdatefiles={setFiles}
            onprocessfile={(error, file) => {
              if (!error) {
                setResponse(file.serverId);
              }
            }}
            server={{
              url: apiClient.getUri(),
              process: (fieldName, file, load, error, progress, abort) => {
                const formData = new FormData();
                formData.append(fieldName, file, file.name);

                const request = new XMLHttpRequest();
                request.open("POST", apiClient.getUri() + "/process");
                request.withCredentials = true; // Add this line

                // Handle progress updates
                request.upload.onprogress = (e) => {
                  // @ts-expect-error
                  progress(e.lengthComputable, e.loaded, e.total);
                };

                // Handle successful upload
                request.onload = function () {
                  if (request.status >= 200 && request.status < 300) {
                    // @ts-expect-error
                    load(request.responseText);
                  } else {
                    error("oh no");
                  }
                };

                // Send the file
                request.send(formData);

                // Abort the request
                return {
                  abort: () => {
                    request.abort();
                    // @ts-expect-error
                    abort();
                  },
                };
              },
              headers: {
                withCredentials: true,
              },
            }}
            name="file" /* sets the file input name, it's filepond by default */
            labelIdle='Déposez un fichier ou <span class="filepond--label-action">Sélectionnez</span>'
          />