FilePond in Laravel: File Upload Guide

For file uploads, there's a very popular JavaScript library called FilePond. How to use it in Laravel? We'll talk about using it in create/edit forms, previewing the images, and then will try to use tools like Spatie Media Library, Amazon S3 and Livewire. So, let's get into it!

Step-by-step, we will cover these topics:

• File Upload Form without FilePond
• Visual Change: Replace File Input with FilePond
• Process Upload with FilePond
• FilePond in Edit Form
• Uploading Multiple Files
• Using Spatie Media Library
• Uploading to Amazon S3
• Upload Directly to S3 With Livewire

Step 1. File Upload Form Without FilePond

First, let's set up the scene: we'll be working with a simple Task form with fields title and image:

Migration structure:

database/migrations/xxxx_create_tasks_table.php:

return new class extends Migration {
    public function up()
    {
        Schema::create('tasks', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->string('image');
            $table->timestamps();
        });
    }
};

Controller method for this form will be as simple as this:

app/Http/Controllers/TasksController.php:

class TasksController extends Controller
{
    public function create()
    {
        return view('tasks.create');
    }

    public function store(TaskRequest $request)
    {
        Task::create($request->validated());

        return redirect()->route('tasks.index');
    }
}

For the front-end part, we will use Laravel Breeze as a starter kit...