How to delete a file on the server? FilePond.revert does not pass parameters to the laravel controller

Question

FilePond.revert does not transfer unique id files to the laravel controller.

How to delete the downloaded file by ID?

FilePond JS

var csrf = $('meta[name="csrf-token"]').attr('content'); 

    FilePond.setOptions({
        server: {
            url: '/file/upload/',
            process: {
                url: 'process',
                headers: {
                    'X-CSRF-TOKEN': csrf
                },
                onload: function (responce) {
                    console.log(JSON.parse(responce))
                },
            },
            revert: {
                url: 'revert',
                headers: {
                    'X-CSRF-TOKEN': csrf
                },
                onload: function (x) {

                    // X - empty, why????
                    console.log(x)

                },
            },
            load: {
                url: 'load/',
            },
        },
    })

    FilePond.create(document.querySelector('.filepond[type="file"]'), {
        files: [
            {
                source: '11',
                options: {
                    type: 'local',
                }
            },
        ]
    });

Loading pictures work successfully. Return unique ID file in response.

public function process(){

        $file = FilesUploadService::save();

        return response($file->collection->id, 200)
            ->header('Content-Type', 'text/plain');
    }

Empty here I can't find the file id. Which need to be removed

public function revert(Request $request){
        return response()->json($request->all());
    }

Answer 1

The onload method below should return a unique id to FilePond. So, for example, if the unique id is found in responce.id you add the return line like shown.

onload: function (responce) {
    console.log(JSON.parse(responce))
    return JSON.parse(responce).id // added
},

Answer 2

Did you get this to work? FilePond uses the DELETE header when reverting, that may be why you're not getting anything from request.

Maybe something like this?

public function revert(){
    $response = new stdClass();
    if ($_SERVER['REQUEST_METHOD'] === 'DELETE') {
    $file_name = strip_tags(file_get_contents("php://input"));
        if (is_string($file_name) && FilesUploadService::delete($file_name)) {
            $response->id = $file_name;
            $response->success = true;
        } else {
            $response = false;
        }
    } else {
        $response = false;
    }
    return response()->json($response);
}

Answer 3

Anyone still struggling:

request->getContent() will return the request payload sent by filepond.

In revert method in controller:

public function revert(Request $request){
     $fileId = request()->getContent();
     //use $fileId to delete file from filesystem
}

Answer 4

I've been struggling with reverting/deleting an early uploaded file using FilePondfor a few hours but after scavenging on there documentation I have figured out a quick hack to get around the situation.

On your JavaScript side you'd be doing something like the following to upload the file via XHRobject:

<script>
        const pondElement = document.querySelector('input[type="file"]');
        const pond = FilePond.create( pondElement );

        FilePond.setOptions({
            server: {
                url: "{!! route('ajax.uploadFiles') !!}",
                process: {
                    headers: {
                        'X-CSRF-TOKEN': '{!! csrf_token() !!}'
                    }
                },
            }
        });
</script>

Now to the tricky part: Reverting/Remove:

<script>
        const filepond_root = document.querySelector('.filepond--root');
        filepond_root.addEventListener('FilePond:processfilerevert', e => {
            $.ajax({
                url: "{!! route('ajax.revertFiles') !!}",
                type: 'POST',
                data: {'_token': '{!! csrf_token() !!}', 'filename': e.detail.file.filename}
            })
        });
</script>

On your ServerSide (Laravel) it's as easy and straight forward as the following:

public function uploadFiles(Request $request)
{
    if ($request->has('attachments')) {
        if (!file_exists(storage_path('app/tmp'))) {
            mkdir(storage_path('app/tmp', 0777, true));
        }

        $file = $request->file('attachments')[0];
        $file_name = $file->getClientOriginalName();

        $file_path = storage_path("app/tmp/{$file_name}");

        $file->storeAs(null, $file_name, 'tmp');
    }
}

public function revertFiles(Request $request)
{
    unlink(storage_path("app/tmp/{$request->filename}"));
}

PS: This code is just for demo purposes, please secure your forms and provide a better user experience.

Answer 5

Filepond script at Laravel blade file

<!-- filepond script -->
<script>
    const inputElement = document.querySelector('input[id="file"]');
    const pond = FilePond.create( inputElement );
    FilePond.setOptions({
        server: {
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            process: {
                url: '{{ route('store') }}',
            },
            revert: {
                url: '{{ route('destroy') }}',
            }
        }
    });
</script>

Destroy method at Laravel Controller file

public function destroy(Request $request)
{
    $folder = json_decode($request->getContent()); // folder name
}

Answer 6

i have faced the exact same problem. i did 2 thing to fix it.

1. must have the process.onload function and return the object Id/path. this Id/path will automatically pass to revert function.

2. in the controller method which handle the revert call. the Id/path from step 1, can be obtain from calling $request->getContent(), notice that $request->all() can not grab the value.