filepond icon indicating copy to clipboard operation
filepond copied to clipboard

[Bug] Patch requests are not sent to the 'process' endpoint

Open gotexx1 opened this issue 1 year ago • 10 comments

Is there an existing issue for this?

  • [X] I have searched the existing issues

Have you updated FilePond and its plugins?

  • [X] I have updated FilePond and its plugins

Describe the bug

I'd like to set up a chunk file upload. However, Filepond sends PATCH requests to the current page and not to the ‘process’ endpoint.

The first POST request works correctly and I get an Transfer ID from my back-end. However, filepond then sends PATCH requests to the URL on the current page. Shouldn't it send the requests to /process? Thank you

Reproduction

This is my configuration:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/filepond/dist/filepond.min.css">
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css">
    <script
        src="https://cdn.jsdelivr.net/npm/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/filepond/dist/filepond.min.js"></script>
    <script>
        const inputElement = document.querySelector('input[type="file"]');
        FilePond.registerPlugin(FilePondPluginImagePreview);
        const pond = FilePond.create(inputElement, {
            server: {
                process: {
                    url: '/api/medias/manage/process',
                    method: 'POST',
                    ondata: (formData) => {
                        formData.append('share_id', document.querySelector('input[name="share_id"]').value);
                        return formData;
                    }
                },
                revert: '/api/medias/manage/revert/',
                restore: '/api/medias/manage/restore/',
                load: '/api/medias/manage/load/',
                fetch: '/api/medias/manage/fetch/',
            },
            chunkUploads: true,
            chunkForce: true,
            imagePreviewHeight: 250,
            imagePreviewMarkupShow: false,
            credits: false
        });
    </script>
    ```
    
    and my back-end:
```php
    public function process(Request $request, $transferId = null)
    {
        if ($request->isMethod('post')) {
            $request->validate(['share_id' => 'required|exists:shares,id']);

            // Créer un ID unique pour le transfert
            $transferId = uniqid();
            $tempPath = storage_path("app/temp/{$transferId}");

            if (!file_exists($tempPath)) {
                mkdir($tempPath, 0777, true);
            }

            return response($transferId, 200)->header('Content-Type', 'text/plain');
        }

        if ($request->isMethod('patch')) {
            $request->validate([
                'file' => ['required'],
            ]);

            $tempPath = storage_path("app/temp/{$transferId}");

            if (!file_exists($tempPath)) {
                return response('Transfer ID not found', 404);
            }

            $offset = $request->header('Upload-Offset');
            $fileName = $request->header('Upload-Name');
            $chunkPath = "{$tempPath}/chunk_{$offset}";

            file_put_contents($chunkPath, $request->getContent());

            $totalLength = $request->header('Upload-Length');
            $uploadedChunks = glob("{$tempPath}/*.chunk");
            $uploadedSize = array_sum(array_map('filesize', $uploadedChunks));

            if ($uploadedSize >= $totalLength) {
                $finalPath = storage_path("app/uploads/{$fileName}");
                $finalFile = fopen($finalPath, 'w');

                foreach ($uploadedChunks as $chunk) {
                    fwrite($finalFile, file_get_contents($chunk));
                    unlink($chunk);
                }

                fclose($finalFile);
                rmdir($tempPath);

                return response('File uploaded successfully', 200);
            }

            return response('', 204); // Chunk uploaded
        }

        return response('Method not allowed', 405);
    }
    ```



### Environment

```markdown
- Device: Computer
- OS: Fedora 41
- Browser: Firefox 132.0

gotexx1 avatar Nov 13 '24 18:11 gotexx1

You can add server.patch https://pqina.nl/filepond/docs/api/server/#url

rikschennink avatar Nov 14 '24 07:11 rikschennink

I used to have this configuration and it worked

        files={files as File[]}
        onupdatefiles={setFiles}
        onerror={() => toast.error(t("error_generic"))}
        onwarning={() => toast.warning(t("error_generic"))}
        allowMultiple={false}
        server={{
          process: {
            url,
            method: "POST",
            ondata(data) {
              data.append("scwStoragePath", scwStoragePath);
              data.append("chunkSize", String(chunkSize));
              userId && data.append("userId", userId);
              return data;
            },
          },
        }}
        name="file"
        // Chunks
        chunkUploads={true}
        chunkSize={chunkSize * 1000 * 1000}
      />

Since a few weeks, when uploading in chunks, the POST request uses the url provided, and then for the PATCH requests, it uses the client url.

I need to implement this :

patch: {
            url: url + "/patch/",
          },

(/patch/:id was added to the controller to the controller)

Is it a bug ? Or the previous way of working has changed ?

Thanks

SteveG-tkorp avatar Mar 03 '25 15:03 SteveG-tkorp

@SteveG-tkorp Hi, I did make a change but my intention wasn't for it to be breaking.

What do you mean with "it uses the client url" ?

rikschennink avatar Mar 10 '25 08:03 rikschennink

Hi @rikschennink ,

I mean that I use, as an example, http://localhost:3000/ for my backend and http://localhost:3001/ for my frontend. I set the backend url (3000) to be used by filepond in the server configuration, it works fine for the POST request, but when filepond starts to send PATCH requests for the chunks, it switches to 3001 instead of 3000

I hope this new comments helps

SteveG-tkorp avatar Mar 10 '25 08:03 SteveG-tkorp

@SteveG-tkorp thanks for the quick reply!

So if I understand correctly it previously used the URL supplied in the server.process property, and now it uses the front-end url instead unless server.patch is set?

rikschennink avatar Mar 10 '25 08:03 rikschennink

Exactly !

SteveG-tkorp avatar Mar 10 '25 08:03 SteveG-tkorp

@SteveG-tkorp I just tried went over the changes in release 4.32.0 but don't see how it could affect this. Do you know which version you upgraded from?

rikschennink avatar Mar 10 '25 08:03 rikschennink

@rikschennink We currently use 4.31.3, it seems we didn't change that since a few months

SteveG-tkorp avatar Mar 10 '25 08:03 SteveG-tkorp

Alright, then I'm not sure. It's probably not related to FilePond as (if I understand correctly) the problems didn't start after upgrading FilePond.

rikschennink avatar Mar 10 '25 08:03 rikschennink

I tested it in a brand new react environment, and the problem occured. But as I use react-filepond, maybe it is from this side

thanks for checking

SteveG-tkorp avatar Mar 10 '25 08:03 SteveG-tkorp