CODEWITHSUNDEEP
reactjsfilepond
shacker
shacker

Reputation: 15371

How to trigger file removal with FilePond

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.

Upvotes: 0

Views: 7876

Answers (3)

jahad empire
jahad empire

Reputation: 21

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

Upvotes: 2

Ebenezery Jesus Navas
Ebenezery Jesus Navas

Reputation: 1

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

       },

Upvotes: 0

Rik
Rik

Reputation: 3596

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

Upvotes: 1

Related Questions