filepond
filepond copied to clipboard
[Bug] Patch requests are not sent to the 'process' endpoint
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
You can add server.patch
https://pqina.nl/filepond/docs/api/server/#url
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 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" ?
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 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?
Exactly !
@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 We currently use 4.31.3, it seems we didn't change that since a few months
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.
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