Upload a file (picture) to server with Laravel using FilePond, how?

Question

I'm trying to use FilePond to upload profile picture during user registration on a Laravel 6 project. In my register.blade.php I've a <input type="file" id="profilePicture" name="profile_picture" accept="image/png, image/jpeg, image/gif"> then, at the botton of the file I wrote:

$('input[type="file"]').filepond();

FilePond.setOptions({
    server: {
        url: '/upload',
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    }
});

in /routes/web.php I added:

Route::post('/upload', 'FilepondController@upload');

and finally, for simplicity and only to check if the upload worked, in /app/Http/Controllers/FilepondController.php I wrote:

class FilepondController extends BaseController
{
    public function upload(Request $request)
    {
        dd($request);
    }
}

but never the app dump $request and die... Obviously the upload via FilePont fail.

I tried to use Sopamo/laravel-filepond (Laravel FilePond Backend) too without success...

What's wrong?

Answer 1

You may use the putFile method on the Storage facade

By default, the putFile method will generate a unique ID to serve as the file name. The file's extension will be determined by examining the file's MIME type. The path to the file will be returned by the putFile method so you can store the path, including the generated file name, in your database.

//...
$path = Storage::putFile('avatars', $request->file('profile_picture'));
$model->profile_picture = $path;
//...

You may also use the storage:link Artisan command:

php artisan storage:link

Answer 2

There are laravel package available for the filepond might be useful for you

1. https://packagist.org/packages/cnviradiya/laravel-filepond

Easy to use upload file and you can get it in controller

Answer 3

FilePond.setOptions({
    server: '{{route('upload')}}',
    method: 'POST',
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
});

Answer 4

Consider using laravel-filepond by rahulhaque it's pretty well maintained, and easy to use of course.

<script>
    // Set default FilePond options
    FilePond.setOptions({
        server: {
            url: "{{ config('filepond.server.url') }}",
            headers: {
                'X-CSRF-TOKEN': "{{ @csrf_token() }}",
            }
        }
    });

    // Create the FilePond instance
    FilePond.create(document.querySelector('yourhtml-file-input'));
</script>

    public function upload(Request $request)
    {
        $this->validate($request, [
            'avatar' => Rule::filepond([
                'required',
                'image',
                'max:2000'
            ])
        ]);
    
        // Set filename
        $avatarName = 'avatar-' . auth()->id();
    
        // Move the file to permanent storage
        // Automatic file extension set
        $fileInfo = Filepond::field($request->avatar)
            ->moveTo('avatars/' . $avatarName);

        // dd($fileInfo);
        // [
        //     "id" => 1,
        //     "dirname" => "avatars",
        //     "basename" => "avatar-1.png",
        //     "extension" => "png",
        //     "filename" => "avatar-1",
        //     "location" => "avatars/avatar-1.png",
        //     "url" => "http://localhost/storage/avatars/avatar-1.png",
        // ];
    }