Uploaded file is 0 bytes

[aaronmeder]

Hi everyone

I have problems getting laravel-filepond to work, and not sure if I am missing a piece that needs to be added.

I have it working so far as that filepond is activated on my frontend and when uploading it shows a green result. Also a file gets created in storage/app/filepond - but it is 0 bytes of size. The app is super minimal, started on Laravel 9 & breeze.

Here is everything that I have in my app related to laravel-filepond:

Requirements composer.json:

"require": {
        "sopamo/laravel-filepond": "^1.2",
},

(also I am loading the css file)

My form containing filepond

resources/views/entry/create.blade.php

<form action="/entry" method="POST" class="createEntry">
        @method('PUT')
        @csrf

        <textarea placeholder="Today..." name="text" @error('text') is-invalid @enderror>{{ old('text') }}</textarea>
        <input name="files" type="file" class="filepond" multiple data-filepond>

        <input type="submit" value="Store" />

    </form>

Import & Init Filepond resources/js/app.js:

import { initFileponds } from "./components/_filepond";

document.addEventListener("DOMContentLoaded", () => {
    initFileponds();
});

resources/js/components/_filepond.js:

import * as FilePond from "filepond";

function initFileponds() {
    // check if there are any fileponds
    const filePonds = document.querySelectorAll("[data-filepond]");
    if (filePonds && filePonds.length <= 0) {
        return;
    }

    // set options first
    FilePond.setOptions({
        server: {
            url: "/filepond/api",
            process: "/process",
            patch: "?patch=",
            revert: "/process",
            headers: {
                "X-CSRF-TOKEN": "{{ csrf_token() }}",
            },
        },
    });

    // init filepond elements
    const pond = FilePond.create(document.querySelector("[data-filepond]"), {
        allowMultiple: true,
    });
}

export { initFileponds };

Controller for actually storing the entry and Filepod file app/Http/Controllers/EntryController.php

namespace App\Http\Controllers;

use App\Models\Entry;
use Illuminate\Support\Facades\Storage;
use Sopamo\LaravelFilepond\Filepond;

class EntryController extends Controller
{
    public function store(Request $request)
    {
        // validate data
        $validated = $request->validate([
            'text' => 'required',
        ]);

        // process filepond files
        $files = $request->input('files');
        $filepond = app(Filepond::class); 
        $path = $filepond->getPathFromServerId($files);
        $finalLocation = 'files/myfile.png';
        \Storage::move($path, $finalLocation);

        // save entry
        $entry = new Entry;
        $entry->user_id = Auth::user()->id;
        $entry->text = $validated['text'];
        $entry->save();

        return redirect()->to('logbook')->with(['status', 'New entry was stored.']);
    }
}

As described it creates a new file in storage/app/filepond/< e.g. CsLTVnTaV7h54PrZ> and also in the EntryController I am receiving that name in $path - that variable will echo filepond/CsLTVnTaV7h54PrZ.

So am not really sure if I've misunderstood how this should work 🤷🏻‍♂️

Would really appreciate someone helping out! Aaron

[Sopamo]

Hey, filepond (or laravel-filepond) by default expects the name attribute of your input element to be file not files. You can configure that behaviour by running: php artisan vendor:publish --provider="Sopamo\LaravelFilepond\LaravelFilepondServiceProvider" and then changing the input_name config to something else (files in your case). I think that might fix your issue.

[aaronmeder]

@Sopamo Thanks a lot, that resolved my issue!