I have FilePond (via React) configured to upload multiple files, to receive those files on the back-end, store them, and show them properly when revisiting the page.
let server = {
url: '/mypath',
process: '/mypath',
revert: '/mypath'
};
<FilePond
server={server}
allowMultiple={true}
allowRevert={true}
files={current_files}
/>
Using a Python back-end, this works fine for uploads:
if request.method == "POST":
# handle request.FILES.get("filepond")
Now I want to implement DELETE, so I add allowRemove={true}
to the FilePond instance and a revert: /path
to the server
configuration. What I expect to happen is that when user clicks the X, FilePond sends a DELETE request. But nothing happens - user clicking X does not send any request at all to the registered endpoint. I did find that I can add:
onremovefile={(file) => handleRemove(file)}
and if I make a handleRemove()
React function, it is called with the file
object. But this seems hacky - shouldn't clicking X automatically contact the registered the endpoint?
Should I proceed to send a DELETE manually from my handleRemove()
function, or am I missing something in my configuration? The docs imply that a "revert" actions triggers DELETE when revert
is defined on the server object.
<FilePond server={'./api'}>
When FilePond wants to upload a file it sends a POST
request to ./api
When FilePond wants to revert a file upload it sends a DELETE
request to ./api
allowRemove
does not exist (maybe you meant to write allowRevert
?).
To send the revert request to a different endpoint you can pass a different URL to the revert
property of the server
object.
<FilePond server={{ url:'./api', revert:'/revert' }>
Now FilePond calls ./api
to upload the file and ./api/revert
to revert the file.
Try useRef hook.
This sample is when the file is successfully uploaded and will get removed right away.
this should work on your case.
const filePondRef = useRef(null)
<FilePond ref={filePondRef} onprocessfile={handleOnProcessFile}/>
then inside on your onprocessfile handler
const handleOnProcessFile = (error, file) => {
if (error) {
return;
}
filePondRef.current.removeFile(file);
};
i have look around for this for long long time but i come up with manual way of remove list item after successful update.
onload: (response) => {
setTimeout(() => {
$("li").remove("[data-filepond-item-state=processing-complete]");
}, 1500);
},