How to trigger file removal with FilePond

Question

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.

score 2 · Answer 1 · answered Jan 11 '21 at 10:16

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);
};

Rik · Answer 2 · 2019-02-14T12:22:26.390

1

<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.

edited Feb 14 '19 at 12:22

answered Feb 14 '19 at 06:39

Rik

3,328
1
20
23

I don't see `src=` mentioned anywhere in the documentation. It specifies `server=`, which is what I'm using. To be sure, I switched to `src=` but it still doesn't contact the server at all (no activity in Django terminal when clicking the X). "When FilePond wants to revert a file upload it sends a DELETE request to ./api" It should! But it's not. This is the essence of my question. "maybe you meant to write allowRevert" Yes, sorry. Had started with that, later tried allowRemove on someone's rec, but neither work. Question updated with current configuration. Thanks! – shacker Feb 14 '19 at 07:14
FWIW I did get it working by calling `axios.delete()` from my `handleRemove()` function, but again, it feels hacky and wonder why I can't get it working as documented. – shacker Feb 14 '19 at 07:22
@shacker sorry, meant to write `server` instead of `src`, corrected now. – Rik Feb 14 '19 at 12:22
@shacker if the file has just been uploaded clicking the X should call the revert method do you see the request in your dev tools network tab? – Rik Feb 14 '19 at 12:25
Nope, no activity in the Network tab, and nothing in my server console. No activity whatsoever. Hence this post! – shacker Feb 14 '19 at 18:08
1

@shacker if you open an issue on the GH repo ( http://github.com/pqina/filepond ) and post a test case I'm happy to take a look – Rik Feb 15 '19 at 06:55

score 0 · Answer 3 · answered Jul 31 '20 at 12:21

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);

       },

How to trigger file removal with FilePond

3 Answers3