FilePond revert uploads: the DELETE request does not contain unique ID. What to do?-CodePudding

I am a beginner and I struggled for days with this problem

My problem is when I press the cross button to revert the file I just uploaded, it sends a DELETE request to the backend (I am using Express). However, the req.body is empty and the backend has no way to identify the files that the user wants to revert.

According to the doc, it says a unique ID is contained, but I just cannot find it. I wonder if I need to manually add something in the properties, but I don't know what to add. Below is my ReactJs code.

<FilePond
                                    files={files}
                                    onupdatefiles={setFiles}
                                    allowMultiple={true}
                                    maxFiles={10}
                                    name="image"
                                    instantUpload={true}
                                    allowReorder={true}
                                    labelIdle='Drag & Drop your files or <span >Browse</span>'
                                    itemInsertLocation='after'
                    

                                    // onprocessfiles={console.log('all files are uploaded!')}
                                    server={{url: "http://localhost:8080/adoptions",

                                            revert:{url:'/revert'}, 

                                             process:{
                                             url:'/process',
                                             method: 'POST',
                                             withCredentials: false,
                                             headers: {},
                                             timeout: 7000,
                                             onl oad: (res)=>{
                                                res = JSON.parse(res)
                                                console.log('RES:',res)
                                                console.log('res.filename:', res['msg'])
                                                pushToArrayAndLog(uniqueFileId,res.filename)
                                            },
                                            // onl oad: (response)=>response.key
                                            ondata: (formData) => {
                                                // getFileEncodeDataURL()
                                                // console.log(formData.values())
                                            // formData.append('extraField', this.id)
                                            return formData;
                                            }
                                             }}}

                                                />

CodePudding user response：

DELETE is a method that is used to delete the resource at the URI you specify.

For example, a DELETE on https://fileserver.example/file.zip would mean that file.zip should get deleted.

So the target of the DELETE is the url itself. DELETE request should not have bodies and in many cases clients and servers drop the body. The fact that the Filepond documentation mentions a body for these requests tells me that either the documentation is incorrect, or they built their API incorrectly.

CodePudding user response：

The unique id should be returned by your server in the process end point.

I see you've implemented the onload hook which is used to pinpoint/select the unique id in a response. So let's assume your JSON response in onload has a fileId in the object. You'd return that id in the onload hook.

process: {
  // other props
  onl oad: (res) => {
    const data = JSON.parse(res);
    return res.fileId; // FilePond passes this id to your server when you use the revert call
  }
}