How to revert process file in FilePond JS?

Question

I started using Filepond JS and I am confused about how to call certain functions. Perhaps it is because my knowledge of ES6 is not that good, or maybe I am just overthinking this whole problem. The process uploads a file to a tmp folder. On the other hand, revert should remove the uploaded file from the tmp folder.

The Problem: I cannot seem to revert an upload in filepond.

Things I tried:

1. Passing POST request with uniqueFileId
2. Passing DELETE request with uniqueFileId
3. Passing empty DELETE request

Any help is appreciated.

My JS:

//File upload
FilePond.registerPlugin(
   FilePondPluginFileValidateSize,
   FilePondPluginFileValidateType,
   FilePondPluginFileEncode
);
    
const inputElement = document.querySelector("input[type='file']");

file = FilePond.create(
   inputElement,
   {
      credits: false,
      maxFileSize: "3000000",
      acceptedFileTypes: [
         'image/jpeg',
         'image/png',
         'application/pdf',
      ],
      fileValidateTypeDetectType: (source, type) => new Promise((resolve, reject) => {
            resolve(type);
      }),
      server: {
         process:(fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
                
            // fieldName is the name of the input field
            // file is the actual file object to send
            const formData = new FormData();
            formData.append(fieldName, file, file.name);

            const request = new XMLHttpRequest();
            request.open('POST', secureUrl("Model/filepond/index.php"));

            // Should call the progress method to update the progress to 100% before calling load
            // Setting computable to false switches the loading indicator to infinite mode
            request.upload.onprogress = (e) => {
               progress(e.lengthComputable, e.loaded, e.total);
            };

            // Should call the load method when done and pass the returned server file id
            // this server file id is then used later on when reverting or restoring a file
            // so your server knows which file to return without exposing that info to the client
            request.onload = function() {
               if (request.status >= 200 && request.status < 300) {
                  // the load method accepts either a string (id) or an object
                  load(request.responseText);
               }
               else {
                   // Can call the error method if something is wrong, should exit after
                   error('oh no');
               }
            };

            request.send(formData);

            // Should expose an abort method so the request can be cancelled
            return {
               abort: () => {
                  // This function is entered if the user has tapped the cancel button
                  request.abort();

                  // Let FilePond know the request has been cancelled
                  abort();
               }
            };
         },
         revert: (uniqueFileId, load, error) => {
            
            const formData = new FormData();
            formData.append(uniqueFileId);

            const request = new XMLHttpRequest();
            request.open('DELETE', secureUrl("Model/filepond-server-php-master/index.php"));

            request.send(formData);

            // Can call the error method if something is wrong, should exit after
            error('oh my goodness');

            // Should call the load method when done, no parameters required
            load();
          }
        }
      }
    );

I looked in the FilePond.class.php:

// revert existing transfer
if ($request_method === 'DELETE') {
   return call_user_func($routes['REVERT_FILE_TRANSFER'], file_get_contents('php://input'));
}

Answer 1

I found that the server can be simplified to the following which allows us to revert the upload. I am not sure why the other way was not working but seems to work just fine.

My JS simplified:

//File upload
FilePond.registerPlugin(
   FilePondPluginFileValidateSize,
   FilePondPluginFileValidateType,
   FilePondPluginFileEncode
);
    
const inputElement = document.querySelector("input[type='file']");

file = FilePond.create(
   inputElement,
   {
      credits: false,
      maxFileSize: "3000000",
      acceptedFileTypes: [
         'image/jpeg',
         'image/png',
         'application/pdf',
      ],
      fileValidateTypeDetectType: (source, type) => new Promise((resolve, reject) => {
            resolve(type);
      }),
      server: {
         url: secureUrl("Model/filepond/index.php"),
         process: './process',
         revert: './revert',
         restore: './restore/',
         load: './load/',
         fetch: null
       }
   }
);