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

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

• javascript
• php
• laravel
• filepond

6 Answers 6

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
}

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.

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
},

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

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
}

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.